Performance · Next.js (App Router)

My HTML document is too large in Next.js (App Router)

Large documents are usually server-rendered state inlined into the page — a framework payload, an unfiltered API response, or base64 images. The browser has to download and parse all of it before it can render, and none of it is cacheable separately.

The fix for Next.js (App Router)

13x detects your framework from the response and hands you this version rather than the generic one — below 50% confidence it hedges and gives you the generic one instead.

In the App Router this is usually the flight payload: everything a server component passes to a client component is serialised into the HTML.

// Sends the whole record to the browser
const user = await db.query.users.findFirst();
return <Profile user={user} />;

// Sends three fields
const user = await db.query.users.findFirst({
  columns: { id: true, name: true, avatarUrl: true },
});
return <Profile user={user} />;

Also check for "use client" high in the tree — it pulls everything below it into the client bundle and its props into the payload. Push the boundary as far down as it will go.

On a different stack? The general version of this fix explains what 13x checks and why it matters, without assuming a framework.

Check your Next.js (App Router) site

113 deterministic checks against your live URL, in about 30 seconds. Framework detected from the response, so every fix comes back in the form your stack actually uses.

No signup. Results in 30 seconds.