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

> I built the same one-page site with a fresh Next.js 16 static export and a fresh Astro 7 site, then counted the JavaScript each one sends.

Published: 2026-10-20
Updated: 2026-10-27
Canonical: https://augustynglowacki.com/posts/javascript-a-static-nextjs-page-ships

## 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](https://nextjs.org/docs/app/guides/static-exports) 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](https://docs.astro.build/en/concepts/islands/)).

| 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](https://web.dev/articles/optimizing-content-efficiency-javascript-startup-optimization)). 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](https://www.npmjs.com/package/create-next-app), [create-astro on npm](https://www.npmjs.com/package/create-astro)):

```sh
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`:

```html
<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](/services/astro-consultancy).

## Sources

- [Next.js docs, static exports](https://nextjs.org/docs/app/guides/static-exports)
- [Astro docs, islands architecture](https://docs.astro.build/en/concepts/islands/)
- [web.dev, JavaScript start-up optimization](https://web.dev/articles/optimizing-content-efficiency-javascript-startup-optimization)
- [create-next-app on npm](https://www.npmjs.com/package/create-next-app)
- [create-astro on npm](https://www.npmjs.com/package/create-astro)