Menu
This is a simple question that almost certainly is answered in the NextJS documentation somewhere, but after looking (as well as googling for some writeup about it) I can't find it.
As I understand it, NextJS works thusly:
If you arrive at your app from an 'external' URL, that is, not through a Link, then the page is SSR'd, and NextJS sends a combo of HTML with JS (NextJS framework, React, etc) to the browser. This HTML is produced through React, on the server.
During the SSR getInitialPropsis called on the server and (I assume) passes initial data down to the SSR process through props
Then React lifecycle methods are called (componentDidMount /useEffect). The application still has access to initial data through props. As I understand it, these lifecycle methods are called on the client -- that's what my console.log tells me -- and thus you can be guaranteed access to things like localStorage.
But does this imply that is there a second render on the client side after the original SSR, that is, the original HTML delivered is replaced by the SPA?
Or does the original SSR content remain, but NextJS somehow calls the React lifecycle methods "directly"?
Part of the issue is that I have zero knowledge of how React works internally -- what relation painting the screen and lifecycle methods have with each other.
I'm trying to understand how NextJS works -- what exactly is the flow, and how NextJS' SSR and React work together, and what happens when and where.
Any help much appreciated!
785
Next Js is a React-based framework that provides a developer with everything required for a production-grade application. SSR or Server Side Rendering is also known as dynamic rendering. In SSR the page is generated each time the server gets a request.
You should use getStaticProps if: The data required to render the page is available at build time ahead of a user's request. The data comes from a headless CMS. The page must be pre-rendered (for SEO) and be very fast — getStaticProps generates HTML and JSON files, both of which can be cached by a CDN for performance.
Next. js does not work without server-side rendering (SSR) by default. I preferred using a non-SSR solution like Create React App, when my app did not require SSR, because SSR had caused me so many unnecessary problems. Turns out Next is still 💯/💯, even if you only need index.
getStaticProps(): A method that tells the Next component to populate props and render into a static HTML page at build time. getServerSideProps(): A method that tells the Next component to populate the props and render into a static HTML page at run time.
But does this imply that is there a second render on the client-side after the original SSR, that is, the original HTML delivered is replaced by the SPA?
What you're describing is what's called the "rehydration" process. Next will return the server-side content and then rehydrate on the client-side through effects (e.g., useEffect) or data fetching client-side (e.g., SWR).
I would recommend watching this video for a more detailed explanation from Tim, the lead maintainer of Next.js.
197
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
