How much JavaScript does a static Next.js page load?

In my one-page test, a Next.js static export sent about 135 kB of compressed JavaScript even with no interactive components. The same page built with Astro sent none. Next.js includes its React runtime and client router in a static export.

How much JavaScript does a static Next.js page load?

I built the same small marketing page in Next.js and Astro on 20 October 2026. It had a heading, a paragraph, a list and a link, with no interactive components.

The Next.js 16 static export sent about 456 kB of JavaScript, or 135 kB with gzip compression. Its HTML included another 4.4 kB of inline script. The Next.js static export docs describe the client navigation payload that goes alongside the HTML.

What does Astro send?

The Astro 7 build produced about 0.5 kB of HTML with no JavaScript. Astro renders framework components to HTML and CSS by default. Interactive components get JavaScript when you add a client:* directive (Astro docs).

Build	JavaScript before compression	JavaScript sent with gzip	HTML
Next.js 16	456 kB	135 kB	5.7 kB
Astro 7	0 kB	0 kB	0.5 kB

These are rounded figures from my one-page builds. The HTML total includes inline scripts. The JavaScript columns count external scripts downloaded by a modern browser.

What is in that JavaScript?

The largest file, about 230 kB before compression, contains React DOM and the code that hydrates the page (hydrateRoot). The other files hold the React runtime, client router, prefetching and Turbopack module loader. Next.js sends that code for browser navigation and client rendering even when the page has no interactive components.

Does this JavaScript make the page slower?

The browser has to download, parse and compile the scripts. More JavaScript takes more time before the site becomes interactive (web.dev). The effect on Core Web Vitals depends on the page, device and other code. File sizes alone do not predict a score.

Is this a fair comparison?

Both projects started from fresh scaffolds with one page. The figures measure the framework code before adding analytics, forms or other site features. Astro adds scripts on pages that use them. In Next.js, those scripts run alongside the existing runtime. I tested a static export, though a server-hosted Next.js site also loads the React and Next.js client runtime.

To make the builds comparable, I changed the Next.js starter configuration:

• The default next.config.ts from create-next-app@16.4.2 turns on cacheComponents and partialPrefetching. With output: "export" added, the build fails with “Invariant: PPR cannot be enabled in export mode”, so I removed both options.
• I removed the Geist font imports and the CSS module from the Next.js starter, so both builds render the same plain HTML.

How can I repeat the measurement?

The measured builds used Next.js 16.4.2 and Astro 7.4.1, with Node.js 24.18.0 and npm 11.16.0 on macOS. The commands pin the scaffolding tools. They install whatever framework version is current on the day you run them, so check package.json and note the versions next to your numbers.

1. Scaffold both projects (create-next-app on npm, create-astro on npm):

npx create-next-app@16.4.2 next-site --ts --app --no-tailwind --no-eslint --no-src-dir --use-npm --disable-git --yes
npm create astro@5.3.0 astro-site -- --template minimal --install --yes

2. In next-site/next.config.ts, set the config to output: "export" only. Replace app/layout.tsx with a layout that renders <html lang="en"><body>{children}</body></html> and a metadata title, delete app/page.module.css and empty app/globals.css.

3. Put the same markup in next-site/app/page.tsx and astro-site/src/pages/index.astro:

<main>
  <h1>Invoicing for small teams</h1>
  <p>Send an invoice in two minutes and get paid on time.</p>
  <ul>
    <li>Recurring invoices</li>
    <li>Card and bank payments</li>
    <li>Reminders that send themselves</li>
  </ul>
  <a href="/pricing">See pricing</a>
</main>

4. Build with npx next build in next-site and npx astro build in astro-site. Next.js writes to out/, Astro to dist/.

5. Read every <script src> in each index.html, sum the file sizes, and gzip each file at level 9 with Node’s zlib.gzipSync. Skip files marked nomodule, because modern browsers do not request them. Count inline <script> content separately.

Your host may serve Brotli instead of gzip, which gives smaller transfer sizes for both builds. The uncompressed size is what the browser parses either way.

What does this mean for a site already on Next.js?

For content pages, Astro can remove the page-wide runtime while keeping React islands where needed. Next.js can still fit a site with logged-in views, client-side state or heavy interaction. I review rendering choices and CMS integration through Astro consultancy.