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.