I have implemented the View Transition feature on this blog. Implementing Astro.js’s View Transition feature is incredibly simple; all you need to do is place the ViewTransitions component in the shared BaseHead.

BaseHead.astro

---
import { ViewTransitions } from 'astro:transitions';
---
...
<ViewTransitions></ViewTransitions>

With just this, you can use the Transition API between pages that utilize BaseHead.

What intrigued me here is that the pages don’t reload. In Astro, when you perform a View Transition, it becomes CSR (Client Side Rendering). This makes sense because the current View Transition API does not support MPA (Multi-Page Applications). However, I think the advantage of Astro.js is that it can do SSG with island architecture and it is an MPA (multi-page application). So, how is it possible to implement View Transitions without losing Astro’s benefits?

The answer was that it was getting HTML like MPA and updating the DOM like CSR.

The ViewTransition component monitors click events, stops the default action with preventDefault, and then executes its own navigation function.

node_moduls/astro/components/ViewTransitions.astro

In the navigation function, retrieves the HTML for the destination URL, and updates the DOM.

node_modules/astro/dist/transitions/routerjs

In fact, as you transition through the page, you can see the HTML being fetched using fetch. (In the video, it is prefetched and fetching is performed on hover.)