What's New With Astro 5?

Astro is a web framework built on top of React. It is designed to create fast, content-driven websites. Recently, Astro released Astro 5.0. The latest version of Astro brings some groundbreaking changes to the Astro ecosystem.

In this blog, let's look at what Astro 5 has to offer.

Content Layer - Unified, Type-safe Content Management

Astro 5 introduces the Content Layer, a flexible, pluggable system for managing content in Astro projects. Why is this important, you might ask. Let me explain.

Previously, Astro 2.0 introduced type-safe content collections for organizing static content. But that required storing content locally in markdown files. However, as content grows, managing everything inside markdown files become impractical. To handle the scale, developers must integrate the app with CMS, APIs, or tools like Cloudinary to manage content.

The Content Layer provides a simple, straightforward way to manage content from various sources. If offers a new pluggable function called loaders that fetch and transform data from any data source.

With thew new content layer, you can:

• Use the built-in loaders to load any type of content from the codebase.

• Write your own loader function to fetch content from external APIs or CMS.

• Use third-party loaders and community-built plugins to fetch content from popular sources like Storybook, Cloudinary, Hygraph, etc.

Astro loads data from specified sources, and caches it into a single, type-safe store that you can easily access inside your pages.

This is an important change for two main reasons:

1. Performance improvements: The new approach is way faster than previous methods. Astro team claims Markdown content builds up to 5x faster and MDX content up to 2x faster, with memory usage reduced by 25–50%.

2. Backward compatibility: Developers working on existing Astro projects don't need to change existing code. Most things would work just by upgrading the existing project to Astro 5.

Read the documentation for migration guide here.

Server Islands - Extending the Island Architecture

Astro pioneered the Island architecture. In Island architecture, only specific interactive components of a webpage, called "islands," are hydrated with JavaScript, while the rest of the page remains static HTML.

Server Components is still a hot topic in the React ecosystem and still many frameworks are working on adopting it efficiently. Astro did the same with Server Islands. Basically, Server Islands extend the idea of Island Architecture and take it to the server. Now you can combine high performance static HTML pages and dynamic server generated components on the same page!

Suppose a blog where users can add private notes for themselves. Here, the blogpost is a static content which would never change. There might be number of likes and a list of comments, which could change infrequently, based on database. And finally, there'd be personalized content like notes added by the user. Previously use had to choose one caching strategy for all of these. Hence in scenarios like this which requires authentication, there was no way everything could be cahches.

That's why Server Islands is a game-changer! Now, you get the best of both worlds. You can use Server Islands for the most dynamic part of your webpage, like the personalized user notes. And you can cache parts of the page that hardly ever change, like blogposts.

Astro 5 provides a new approach on how to build static projects using Server Islands. This is a part of their new thinking model about what does it mean for a page to be 'static'. Let's learn more about that in the next section.

Add the server:defer directive to any component on your page to turn it into its own island:

---
import Avatar from '../components/Avatar.astro';
---

<Avatar server:defer />

These components can do anything you normally would in an on-demand rendered page, such as fetch content, and access cookies, etc. Here's an example:

---
import { getUserAvatar } from '../sessions';
const userSession = Astro.cookies.get('session');
const avatarURL = await getUserAvatar(userSession);
---

<img alt="User avatar" src={avatarURL} />

Read the in-depth guide about Server Islands here.

Simplified Prerendering

Astro has evolved its output modes over time, starting with Static and Server for building static or dynamic websites. With Astro 2.0, it introduced the Hybrid mode, allowing a mix of static and server-rendered pages. However, as features like actions and server islands grew, managing the settings became complex, leading some users to overuse server rendering, unintentionally slowing their sites.

Astro 5 simplifies all of this! The hybrid and static options have been merged into the default static option. This would allow you to render individual routes at runtime on the server just by adding an adapter, without any configuration.

---
export const prerender = false
---

<html>
<!--
This content will be server-rendered on demand!
Just add an adapter integration for a server runtime!
All other pages are statically-generated at build time!
-->
<html>

One important thing to note here is that Astro remains static by default, generating traditional .html files as usual. However, setting prerender = false on a page enables server-side rendering automatically, letting you use dynamic features without worrying about configuration modes.

Astro:env - Type-safe Environment Variables

Setting up the development process is the complicated part of configuring your Astro app. To reduce the complexity, Astro 5 has introduced a new module, astro:env, which gives you a type-safe way to define the environment variables to your app.

• Configure different variables to be used on client and server side

• Specify whether a variable is required or optional, allowing you to catch bugs at early stages.

• Define type of the variable to prevent the need to cast your application.

• You can designate variables as secrets that you don't want to expose in the client bundle or server builds.

Check out full guide here.

Astro 5 Fully Supports Vite 6

It's been not even a month since Vite 6 was officially released and made stable, that Astro 5 ships with Vite 6. The Astro team has been working with beta releases of Vite 6 for over a while. Therefore, it could manage to ship the recently launched version of Vite with Astro 5.

The new environment API is the biggest update from Vite 6. These new APIs will allow framework authors (like the Astro team) and Vite Plugin maintainers to offer a dev experience closer to production and for the Ecosystem to share new building blocks.

And the great part is, you don't need to make any changes to your code if you are upgrading from older versions!

Experimental Features

Astro 5.0 also introduces several experimental features, available by enabling flags in your configuration. These features would soon become stable in future minor releases of Astro 5.x.

It's easier to use SVGs

Astro 5 directly lets you import SVG files like an Astro component. Such components accept all the props an <svg> tag would accept as attributes, like height, width, fill, and so on.

To enable this feature, set experimental.svg to true in Astro config file:

{
 experimental: {
   svg: true,
 },
}

You must have an SVG file locally stored inside your codebase. You can import it just like any other asset and use it as a component:

---
import Logo from './path/to/svg/file.svg';
---

<Logo width={48} height={48} />

As this SVG image is treated as an Astro component, you must use the Astro convention for component names, i.e., PascalCase while importing the image.

Check out official guide for using SVG in Astro 5.

Responsive image layouts

Astro 5 supports setting pre-defined responsive image layouts. These will autoimatically generate the proper srcset and sizes values to make your images look good and perform well on all devices.

You can enable responsive images for all <Image /> and <Picture /> components by setting image.experimentalLayout with a default value. This settings can be overridden by the layout prop on each component.

{
  image: {
    // Used for all `<Image />` and `<Picture />` components unless overridden
    experimentalLayout: 'responsive',
     },
  experimental: {
    responsiveImages: true,
  },
}

With responsive set as the default layout, you can override any individual image’s layout property:

---
import { Image } from 'astro:assets';
import myImage from '../assets/my_image.png';
---

<Image src={myImage} alt="This will use responsive layout" width={800} height={600} />
<Image src={myImage} alt="This will use full-width layout" layout="full-width" />
<Image src={myImage} alt="This will disable responsive images" layout="none" />

Check out the guide for this feature.

Image cropping support

Astro now supports cropping images when using its default Sharp image service for image processing.

Using the new fit and position props, you can now create images that perfectly match their container, saving precious bytes.

import logo from "../logo.png";

<Image src={logo} fit="cover" width={200} height={200} />

Getting Started with Astro 5.0

Astro provides multiple ways to try out its latest version. The simplest one is to head over to astro.new and choose a readymade template to start.

Otherwise, you can create a new Astro project locally with the following command:

npm create astro@latest

If you want to upgrade existing Astro project to Astro 5, you can use the official codemod to do so. Execute the following command in your Astro project.

npx @astrojs/upgrade

For a detailed upgrade guide, visit the Astro documentation.

Wrapping Up

Astro 5 brings a lot of promising and exciting changes to Astro. I am personally excited about Content Layer and Server Island. I am hoping to experiment and use them in my projects soon.

What do you think about Astro 5? What features you're most interested in? I'd love to know. I am most active on Twitter and Peerlist, if you want to say hi!

And if you are looking for a Frontend Developer Jobs, you will find many good opportunities on Peerlist Jobs. Don't forget to check them out.
Until then, keep building! 👨‍💻