My /projects page in Next.js 16 shipped 854 KB of HTML for a list of 49 projects. Almost all of that weight was the same few strings repeated, and in the App Router every repeat ships twice: once as HTML and once more inside the inline React Server Components payload (the self.__next_f.push scripts at the bottom of the page). Three changes took it to 459 KB: an SVG sprite for the icon on every row, JSON-LD that links to detail pages instead of copying them, and named Tailwind utilities for the row classes. A fourth stopped the page from prefetching 36 routes it didn't need.

Why is my Next.js page HTML so large?

Open view-source on any App Router page and scroll to the bottom. After the HTML you will find self.__next_f.push([1,"..."]) scripts. That is the RSC payload, the serialized component tree React uses to hydrate the page and to navigate without a full reload.…