Source code of hydration process

[lubiikpupiik]

Hi. ! I want to take a look on hydration process in next.js, but there isn't any kind of docs for that 😢 So i wanted to take a look on hydration in the source code. I am mostly interested into the part, where next compares the prerendered HTML from server to the frontend HTML generated by js. Any suggestions would be helpful. ✌️ Thanks and have a beautiful day 🦋

[timneutkens]

It's located here: https://github.com/zeit/next.js/blob/canary/packages/next/client/index.js#L318

[Timer]

For posterity, here's a point-in-time snapshot of this URL:
https://github.com/zeit/next.js/blob/6598e99b4956aa87081a8d22c01b1d2461b34b82/packages/next/client/index.js#L318

[dvelasquez]

I've been bouncing ideas about this.
At work, we have marketplaces in several countries and, because of the nature of those sites, there are pages (like the listings) which are very big (at least 2000 DOM nodes).
In some of this pages, the hydration process can take even 8 seconds. So we know that we should try to decrease the number of DOM nodes, but we could also be using something like idlize for the hydration process, so this is not a big one task and instead a bunch of microtasks (tasks under 50ms).