Next.js: Unnecessary render on client after SSR

[allenylzhou]

Bug report

Describe the bug

I would expect that on initial page load, the root component's render function would not be called again if the root component has already been rendered into a string on the server side. But this does not appear to be the case.

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

1. git clone https://github.com/arunoda/learnnextjs-demo.git
2. cd learnnextjs-demo
3. vim pages/index.js

const Index = () => {
  console.log('Rendering Index');
  return <div>
    <p>Hello Next.js</p>
  </div>
}

export default Index

1. npm i && npm run dev
2. Go to http://localhost:3000

Expected behavior

Rendering Index will not be printed in browser console because it is SSR.

Actual behavior

Rendering Index is printed in browser console.

[timneutkens]

As far as I know, this is expected, as ReactDOM.hydrate will still need to instantiate all components needed for the page. The difference with SSR is that React won't repaint the browser DOM.

So the way to look at it is that React needs to set up the virtual DOM, and the browser DOM won't be touched if the SSR response is the same as the virtual DOM, if it is different however those changes will be applied which causes a repaint, also, React will warn that the SSR response is not the same.

I hope I'm explaining it correctly, this is just my understanding of how hydration works, maybe @gaearon or @acdlite can explain it more 👍

[allenylzhou]

That makes sense to me. Thanks for clarifying.