Next.js and Lazy Hydration. Keep the HTML but drop the Javascript

Code splitting can only get us so far, and how it works means you end up loading a lot of JS you don't really need right then and there. Why download the footer code when I'm looking at the header?

Code splitting has served us well, its lets us eliminate a good amount of unused payload from an application. But… its not perfect.

In the case of react, code split SSR, and all the libraries that exist are more or less founded on the same mechanism first created 5 years ago. We track if an import was executed during render and push its identifier into a map, then correlate that identifier against the client-side build to know what client javascript to send down in the SSR response.

For those who don't know, everyone who uses SSR is using two independent webpack builds, one for the server and another for the browser. So the server needs some way to create a relational mapping of what it executed and what the browser is going to need to execute.

The problem is.. I don't need all that javascript right away — mostly, I just want the HTML for SEO.

DLAYS, Download As You Scroll

Next.js is subject to the same problem as everyone else, if it's in the HTML render, the JS is on the page.