SSR and BSR in next.js (as of 8), in a pseudecode form

ssr-jsr-nextjs8.md

First screen: server-side rendering

happens on first navigation

1. @server: p1 = await App.getInitialProps
   • calls Page.getInitialProps in turn
2. @server: const html = ReactDOM.hydrate(<App { ...p1 }>);
3. @server: res.send(html, p2 = JSON.stringify(p1)
4. @client: parse and show html as usual
5. @client: ReactDOM.render(<App {...JSON.parse(p2) } />)
   • causes const appClient = new App(JSON.parse(p2);
   • and appClient.render() / appClient.componentDidMount()

Second screen and forward: browser-side rendering

happens on consequent navigation-s

1. @client: p3 = App.getInitialProps())
   • calls Page.getInitialProps in turn as in the case of SSR
2. @client: render <App {...p3} /> to existing DOM
   • do not cause new App(p3): App instance already created/mounted in SSR pass