Astro

Content-first web framework with a native islands architecture. Ships zero JS by default — interactive components opt in with client:* directives. Under evaluation as a potential replacement for the hegnar-web Express + React stack.

Why It Matters for finansavisen.no

Astro’s rendering model eliminates the react-esi-hydration-problem — the core technical challenge with the Zephr CDN. See that page for the full Next.js vs Astro comparison.

Key advantages:

Zero JS default — content pages ship no JavaScript, massive CWV improvement
Islands only hydrate their own DOM — Zephr can transform everything else
HTML comments preserved —  tags just work
Server Islands (Astro 5) — built-in application-level ESI for personalized fragments
Incremental migration — Node adapter runs alongside Express, reuse React components as islands

Core Concepts

Islands Architecture

<article>
  <h1>{article.title}</h1>          <!-- Static HTML, 0 JS -->
  <div set:html={article.body} />   <!-- Raw HTML injection -->
  <StockTicker client:visible />    <!-- Island: hydrates only this element -->
</article>

Hydration directives:

client:load — hydrate immediately on page load
client:visible — hydrate when element enters viewport
client:idle — hydrate when browser is idle
client:media="(max-width: 768px)" — hydrate on media query match
client:only="react" — client-render only (skip SSR)

Server Islands (`server:defer`)

<UserGreeting server:defer>
  <div slot="fallback">Loading...</div>
</UserGreeting>

Static shell cached by CDN, dynamic fragments fetched per-user via separate HTTP request. Supports Cache-Control headers per island.

Multi-Framework Support

One page can use React, Preact, Svelte, Vue, Solid, and Lit islands simultaneously. Each framework only ships JS for its own islands.

SSR with Node Adapter

Standalone mode: own HTTP server
Middleware mode: Express/Fastify compatible handler

import express from 'express';
import { handler as astroHandler } from './dist/server/entry.mjs';
const app = express();
app.use(astroHandler);

Middleware (Response Transformation)

Unlike Next.js, Astro middleware can transform the response HTML:

export const onRequest = async (context, next) => {
  const response = await next();
  const html = await response.text();
  const enriched = injectZephrTags(html);
  return new Response(enriched, { headers: response.headers });
};

Performance

Metric	Astro	Next.js
CWV pass rate	>50%	~25%
JS shipped (content page)	0 KB	~80-200KB
”40% faster, 90% less JS” vs React frameworks (Astro benchmark)