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.
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.
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.
Download as you scroll attempts to mitigate this problem by preserving the markup but filtering out the corresponding chunks from the server response. As the name suggests, only downloading the JS chunks and hydrating those elements when the user begins to scroll them into view — thus reducing the amount of code you need to load at startup.
Why download the footer JS if I'm looking at the top of the page?