Astro
Astro
Astro is a web framework built around content sites that ships HTML first. Interactive pieces load their JavaScript only where you mark them.
How it is measured
You measure Astro by what lands in the browser: HTML bytes, CSS bytes, and JavaScript bytes per route. Build a page, open DevTools, and sort the network panel by type. A content page that needs no interaction should show no script requests at all.
Astro is not a metric, so confirm it from the project. An astro.config file, a src/pages folder of .astro or Markdown files, and a dev command that prints a local URL are the signs. The build output in dist/ should be HTML you can read.
Worked example
A 140-page documentation site moves from a single-page React app to Astro. The old home route downloaded 312 KB of JavaScript before showing the first heading. The Astro build sends 0 KB of JavaScript on the home route and 18 KB on the search page, where one search box is an island.
Build time goes up, from 6 seconds to 41, because every page now renders to a file. Time to first byte on the host falls to the cost of reading a static file.
How it differs
Astro is the framework. An Astro island is one interactive component inside an Astro page. Astro decides how the whole site is built and routed; an island decides only when one widget wakes up.
Common errors
Calling Astro a static site generator and then being surprised by on-demand rendering. Assuming every Astro page is fast no matter how many islands load on start. Pulling in three UI frameworks on one page and paying for all three runtimes. Treating Astro as a replacement for a backend. Skipping the build output check.
In practice
Pick Astro when the site is mostly text and images with a few interactive spots. Ship the first version with no client directive anywhere, then add one at a time and watch the bundle size in the build log. If most routes need app-like state, a full application framework will cost you less effort.