Astro View Transitions — The Cheapest SPA Feel Money Can Buy

Your marketing site is a multi-page app (MPA). Each page is static HTML. Navigation is a full page reload. The browser clears the DOM, fetches new HTML, re-renders from scratch. On a fast connection it's fine. On 4G it feels sluggish. There's a moment of whitespace, a brief delay, the sense that the site is "clunky." Then SPA routing came along — React Router, Next.js dynamic routes, Remix — and solved the problem with client-side navigation. But they solved it by shipping 250kb of JavaScript. Astro's View Transitions split the difference: MPA architecture with SPA feel for 4 lines of code and zero JavaScript overhead. This is the move that makes Velocity X feel buttery smooth.

View Transitions is a browser API (CSS Transitions API, still being standardized) that lets you animate between page states. Astro wraps it in a tiny library that hooks into its routing. You drop `` into your layout. Every navigation animates. Links don't reload — the page fades out, new content fades in, scroll resets, and the illusion is perfect. It's not a real SPA. It IS a real SPA user experience. The kicker: the performance is better than a real SPA because you're not shipping a router or state manager. This is how you win.

What View Transitions Actually Are

The CSS Transitions API lets you define transitions between the "old page" and the "new page." Normally, navigation is synchronous: browser stops rendering, fetches new HTML, clears the DOM, renders. User sees a flash. With View Transitions, you can animate the swap. The old page fades out over 400ms. While it's fading, the new page is being fetched and parsed in the background. As the fade completes, the new page fades in. To the user, it looks like navigation is instant and smooth. There's no "flash." There's no wait. Just continuous motion.

Astro's implementation is elegant: it wraps the native API and handles all the plumbing. You don't touch CSS. You don't manage transitions manually. You just add one component to your layout, and every page navigation gets an automatic fade/slide/zoom effect. The library intercepts link clicks, starts the transition, fetches the new page, swaps the DOM, and triggers the new page's animations. All synchronous, all seamless, all from 4 lines of code.

Why MPA + Transitions Beats SPA for 95% of Sites

A single-page app (SPA) like Next.js or React Router owns all of navigation. Links are intercepted by JavaScript. The router fetches JSON (or JSX), updates client-side state, re-renders the page. No full reload. Navigation is instant. But you paid for it: you shipped 250kb of React, 30kb of Router, state management, hydration delays, and a build toolchain.

An MPA with View Transitions is structurally the same: links are intercepted (by Astro's tiny transition library, not a full router), the server sends HTML, the page re-renders. But you paid almost nothing: Astro's View Transitions is ~2kb. The site is static. No build overhead. No hydration. No runtime state management. The page load is still as fast as a static site. The feel is as smooth as an SPA.

The math: SPA overhead = 250kb+ JavaScript + build complexity. View Transitions overhead = 2kb + one component. Same user experience. Vastly different cost. For 95% of websites (marketing sites, blogs, documentation, portfolios), this is the obvious choice. Your site doesn't need a router. It doesn't need state. It needs fast page loads and smooth transitions. View Transitions gives you both.

The 4-Line Implementation

Step 1: Install and import.

npm install astro @astrojs/view-transitions

Step 2: Add to your layout.

// src/layouts/Layout.astro
---
import { ViewTransitions } from 'astro:transitions';
---

<html lang="en">
  <head>
    <ViewTransitions />
  </head>
  <body>
    <slot />
  </body>
</html>

That's it. Every page now has smooth transitions on navigation. Links fade out, new content fades in, and the site feels like an SPA without shipping SPA code. Click a link. Watch the magic. The transition is built-in and automatic.

Step 3 (optional): Customize the animation.

<ViewTransitions fallback="swap" />

The `fallback` prop controls what happens on unsupported browsers. `swap` means instant navigation (no animation, just a normal MPA reload). You can also customize the animation with CSS by targeting the `::view-transition-old(root)` and `::view-transition-new(root)` pseudo-elements. Astro provides sensible defaults. For 95% of sites, you don't touch this.

What Actually Breaks (And How to Fix It)

Problem 1: Scripts re-run on every page transition.

The DOM is re-rendered during navigation. Any `

Web Development