← All articles

Astro 3.0 and View Transitions: SPA-feel without the SPA weight

08 August 20232 min read

Smooth navigations like a real app, but with a static site. Astro 3.0 makes a big step and rewires how we think content-heavy sites.

Astro 3.0 landed in late August 2023 with a punch few expected: native support for the browser View Transitions API. In practice, smooth animated page transitions without writing routing JavaScript.

Why we care

For Astro's sweet spot — editorial, documentation, marketing — the "page reloads" feel is the real limit. With View Transitions, the header stays, the hero slides off, the new page slides in. No React Router, no Vue Router, no overhead.

How it works

You drop <ViewTransitions /> in the layout, declare transition:name on the elements that should morph, and Astro does the rest. The browser intercepts internal links, fetches the new page, applies the declared CSS transitions.

The honest limits

  • Safari support came later, and the fallback is a classic page reload — not bad, but felt.
  • Not an SPA: React/Vue island state is lost on navigation unless declared otherwise.
  • If the app needs persistent state (audio player, live session), Astro is not the pick.

Who we recommend it to

Brochure sites with 20-200 pages, blogs, knowledge bases, docs. Not for complex apps. The perceived difference vs static Next.js is marginal, but the JS bundle is 1/10 — and for SEO-driven projects that means less Core Web Vitals pain.