Astro: Two Years Later

View Transitions API

The most exciting one for me was when Astro added support for the View Transitions API, which at the time was only available in Chrome. This API makes page-to-page transitions much smoother.

Astro built this feature in directly. I still remember seeing the demo and thinking it was super-duper cool. I immediately wrote some code so my own website could use it too.

The View Transitions API is now supported by more browsers, Firefox users can also see these fancy transitions.

In Astro, this is now called <ClientRouter />.

i18n routing

In Astro 3.5, they introduced a new feature: i18n routing. It made building multilingual websites much easier.

Basically, Astro moved the routing work for multilingual sites into the framework layer, so developers can focus on content and design.

In Astro 4, they improved the i18n routing logic again, adding support for defining a default language and exposing useful variables to help pages detect the current locale.

src/pages/
├── 404.astro
├── blog
│   ├── index.astro
│   └── [slug].astro
├── index.astro
├── rss
│   ├── blog-en.xml.js
│   └── blog-zh.xml.js
└── zh-tw
    ├── 404.astro
    ├── blog
    │   ├── index.astro
    │   └── [slug].astro
    └── index.astro

Amazing template generation

This isn’t a new feature, but it’s so good that I need to mention it again.

If you’ve used React-like frameworks, you’ve definitely seen syntax like this:

() => {
  const mySuperTitle = "Hello World";
  
  return (
    <h1>{mySuperTitle}</h1>
  )
}

The cool part is Astro supports a very similar style. Think of it as React, but without shipping all that JS:

---
const mySuperTitle = "Hello World";
---

<h1>{mySuperTitle}</h1>

Quick note: the JavaScript between the two --- runs on the server. The part below is what gets sent to the client. So if you write a <script> tag below, that code runs in the browser — which is very handy for interactive pages.