Next.js: Render will be called twice...

[janbaer]

This issue is just a question about the Render function for server-side rendered pages. I just tried to find out which React function will be called on the server and which will be called on the client.

So the result was that when the page will be rendered on the server, the componentWillMount and the Render function will be called and on the client, both functions will be called for the second time, additionally to the componentDidMount function.

So my question is, why the on the client the Render function will be called again and if I don't loose the performance win because of this?

Maybe this question is not about Next.js, it's more about the server side rendering of React pages.

[Grokling]

The lifecycle events run on the server to generate a set of rendered html and styles to create the SSR html. Once that html is loaded in your browser, you don't need to wait for any more resources to load, or for javascript scripts to execute.

The lifecycle events run again on the client (except for getInitialProps on first load) once all the bundle resources have loaded, and the javascript runtime is up and working - this gives you the interactive experience. Initially, with a newish project, the delay between the SSR rendering showing, and the clientside rendering taking over is almost imperceptible.

The advantage you gain from SSR is that initial 'fully rendered' view of things as soon as the html hits the browser. A further advantage is that you gain the ability to have your SPA crawlable by search engines.

[janbaer]

Thanks for the quick explanation!