Astro 3.0 is here: Check out the new View Transitions!
5 September, 2023
5
5
0
Contributors
Astro 3.0 has been the talk of the town since its release on August 30. And, of course, it deserves all the appreciation it is receiving. Astro 3.0 brings some fantastic features out of the box that are not fully supported by any major frameworks or libraries yet.
In this blog, let's dive deep into exploring what Astro 3.0 offers, what doesn't, how to upgrade your existing Astro app, and a lot more!
But first, what is Astro?
Astro is an all-in-one web framework designed for speed. It is an open-source framework for generating web applications on top of popular UI frameworks like React, Preact, Vue, or Svelte. Astro was designed for building content-rich websites. This includes most marketing, publishing, and documentation sites, blogs, portfolios, and some e-commerce sites.
Astro is popular for all the great features it provides: component island architecture, sever-first API design, Zero-JS approach, edge-ready nature, customizability, and UI agnostic, just to name a few.
What's new with Astro 3.0?
On August 30, Astro released Astro 3.0. It brings some amazing new features and provides functionality for new browser APIs that are yet to be supported fully by other frameworks like Next.js. Here are the most important additions in Astro 3.0:
- Full support for View Transitions API: This was only available in single-page apps. Astro became the first server-side technology to fully support View Transitions API.
- Image Optimization (stable): Unflagged and better than ever.
- Faster Rendering Performance: Astro components render 30-75% faster.
- SSR Enhancements for Serverless: New ways to connect to your hosting platform.
- HMR Enhancements for JSX: Fast Refresh support for React and Preact.
- Optimized Build Output: Cleaner and more performant HTML.
Let's dive deep into some noteworthy features Astro provides one by one.
Astro View Transitions
View Transitions is a new collection of platform APIs that enable native browser page transition effects. Previously, only Single Page Applications could do this, but web browsers and standard authors have been working hard over the last few years to bring native page transitions to the platform, and Astro 3.0 is the first web framework to do so.
With Astro View Transitions, you can:
- Morph persistent elements from one page to another
- Fade content on and off the page, for a less jarring navigation effect
- Slide content on and off the page, for a bit more personality
- Persist common UI across pages, with or without a refresh
It's possible to add subtle and beautiful transitions with just a couple of lines of code. In your Astro app, import ViewTransitions component and add to inside any page’s <head> element:
---
// src/pages/index.astro
// Note: Make sure you add the "<ViewTransitions />" component to other pages as well, and not just one.
import {ViewTransitions} from 'astro:transitions';
---
<head>
<title>My View Transition Demo</title>
<ViewTransitions />
</head>
<body>
<!-- -->
</body>
This feature was available with experimental support in Astro 2.9 and the Astro community has designed some of the most fluent server-side rendered applications.
Faster rendering performances
Rendering performance improved significantly in Astro 3.0, with most components rendering 30% quicker than the previous version. The speed gain in difficult benchmarks can be as high as 75%.
A deliberate refactoring effort that began in Astro 2.10 and continued into Astro 3.0 was responsible for this sort of speed-up. The team deleted as much superfluous code as possible from our build pipeline's hot pathways and optimized what remained.
Stable Image Optimization
Image Optimization is not fully stable and is supported with Astro 3.0. Astro provides a built-in <Image> component, just like Next.js, that handles everything about rendering images on the web. The build pipeline automatically detects and optimizes images in your app.
Astro recommends putting all images inside of your codebase itself, preferably within your /assets or /public directory. Astro converts all such images directly into WebP image format, reducing its size and resulting in less time to send it to browsers.
The latest release also gives predefined width and height to the image. This prevents "Cumulative Layout Shift", and helps improve SEO.
---
// Import the <Image /> component
import { Image } from "astro:assets"
// Import a reference to the image itself
import image from "../assets/image.png"
---
<Image src={myImage} alt="A cool dog" />
There are also some other updates regarding Image optimization that we must check:
- Astro 3.0 fully supports Vercel's built-in Image service.
- Astro now uses Sharp as its default optimization library
- The team has added support for optimizing images from remote workflows and CMS tools.
Optimized Build Outputs
There are several changes in the overall build output in Astro 3.0. Let's briefly look at them:
- The latest version automatically minifies HTML outputs. This will reduce the payload and increase the overall response time.
- The cluttered
astro-xxxxclass names are replaced with a dedicated HTML attribute. Thedata-astro-cid-hashattribute makesclassattribute more readable and organizes HTML output in a cleaner way. - With 3.0, Astro adds small CSS chunks into HTML. This will significantly improve page load performance.
How to use Astro 3.0?
You can try Astro from your browser or your command line.
Visit astro.new to try Astro 3.0 from your browser.
Similarly, you can create an Astro project on your local machine with the following command:
npm create astro@latestHere is a detailed documentation if you want to upgrade your existing Astro app to Astro 3.0
To learn more about Astro and build faster apps for production, refer to its documentation:
Breaking changes with Astro 3.0
The latest Astro version also includes some breaking changes and has removed some deprecated features.
- Astro v3.0 drops Node 16 support entirely so that all Astro users can take advantage of Node’s more modern features.
- Astro v3.0 drops Node 16 support entirely so that all Astro users can take advantage of Node’s more modern features.
- Astro v3.0 removes this integration from the codebase entirely. Astro’s new solution for images is a built-in image services API:
astro:assets. - Astro v3.0 completely removes the package
@astrojs/markdown-component. Astro’s<Markdown />component will no longer work in your project.
There are a lot of breaking changes introduced in Astro 3.0. Make sure you read the upgrade guide before using Astro 3.0 in your projects.
Closing notes
As we dive deeper into the capabilities of Astro 3.0, it's evident that this framework is a game-changer. Its commitment to speed, optimization, and user experience makes it a valuable asset for anyone looking to build content-rich websites, blogs, portfolios, and more.
However, it's crucial to be aware of the breaking changes and deprecated features when upgrading to Astro 3.0, as staying informed ensures a smooth transition. Overall, Astro 3.0 has earned its place as a leading choice for web developers seeking to create cutting-edge, high-performance web applications.
astro
astro3
viewtransitions
ssr