Astro: Client-side routing and view transitions

By default clicking a link to another page in Astro does a full page reload.

There’s a full roundtrip to the browser, with page flickering as the browser has to reload all the HTML and assets.

There is no client-side navigation by default, and this is a good thing, because Astro does not ship a ton of JavaScript to handle it.

But if you need it, view transitions can help you.

View transitions are a Web standard that let us create smoother transitions between HTML pages.

In Astro you can enable view transitions in each individual page, or by adding them to your layout(s) they will be applied globally.

You import ViewTransitions from Astro and include that component in the page head tag:

---
import { ViewTransitions } from 'astro:transitions'
---

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

Now when the user hovers a link (goes over it with the mouse), browsers that support view transitions are going to prefetch the destination page in the background, store it in their cache, and when the user clicks, they load that page from their cache.

This can make the site feel very fast.

And on top of that, the browser does a smooth transition between pages.

Lessons this unit:

0:	Introduction
1:	Your first Astro site
2:	The structure of an Astro site
3:	Astro components
4:	Adding more pages
5:	Dynamic routing
6:	Markdown in Astro
7:	Images
8:	Content collections
9:	CSS in Astro
10:	JavaScript in Astro
11:	▶︎ Client-side routing and view transitions
12:	SSR in Astro
13:	API endpoints in Astro
14:	Managing forms in Astro COMING SOON