nextjs Flashcards
What is the problem with SPAs?
The first load takes a long time before the user can do anything at all
What are the 5 steps that the spa’s do to render a html page
request html html return with a div and some js js downloads other js files requests to the rest server finally render the page
Since server-side rendering fixes the SPA’s first load issue, what are the problem with server-side js?
not all js runs on the server
event lifecycle is diff on the server
async call completion gets tricky
Which framework can solve few of the spa’s issues but keeping its great ux?
nextjs
how to manually install next js?
mkdir my-next-prj && cd my-next-prj npm init npm install react react-dom nextjs --save create a pages folder with an index.js then run the next command
where to put nextjs configs?
in the .next folder in a file called next.config.js
How does the server-side rendering work? 5 steps
nodejs runs js
react is started and all components ctors run
component render methods called
all rendered static html is sent to client browser
How does the client-side rendering works? 6 steps
html downloaded from server script tags download js files js executes including all react comps comp constructors run *component lifecycle events such as componentDidMount run* component render methods called
What is html mistmatch warning and what does it mean? What side effect does it cause?
warning that means that the server html is diff than the client html. cause the app to be re-render client-side (app still work but with overhead).
How to solve the html mismatch warning?
by using the getInitialProps which passes the initial state along with the server-side-rendered html (the first load) meaning that the client-side instead of creating its own initial state (e.g new Date()) it is going to use the server-side-generated on which is encoded within the __NEXT_DATA object.
What problem can the getInitialProps() cause? What should we avoid doing with it?
The component is only constructed after the getInitialProps is completed, even if the getInitialProps returns a promise. It means we have to be careful with what is executed inside this method (make sure it runs fast)
What happens if I change the BROWSER url to /sessions? How to avoid going to the server?
The sessions page is SERVER-SIDE rendered. By using a nextjs link component that does a client-side routing (needs to be a link somewhere in the page).
What happens if I change the BROWSER url to /sessions? How to avoid going to the server?
The sessions page is SERVER-SIDE rendered. By using a nextjs link component that does a client-side routing (needs to be a link somewhere in the page).
where to put images and other static content?
in the static folder and its subfolders
How to name the files inside the pages dir? How to name the page’s main react component?
index.js = lower case so can be accessed localhost:3000
export const Index = pascal case
