Astro 3.0 | Astro
Introducing Astro 3.0!
Astro 3.0 is the primary main internet framework to assist the View Transitions API. Fade, slide, morph, and even persist stateful parts throughout web page navigation with ease. Till not too long ago this had solely been potential inside JavaScript Single Web page Functions (SPAs). However because of advances within the internet platform, these options at the moment are accessible for everybody in Astro 3.0.
Different launch highlights embrace:
- Picture Optimization (secure): Unflagged and higher than ever.
- Sooner Rendering Efficiency: Astro elements render 30-75% quicker.
- SSR Enhancements for Serverless: New methods to connect with your internet hosting platform.
- HMR Enhancements for JSX: Quick Refresh assist for React and Preact.
- Optimized Construct Output: Cleaner and extra performant HTML.
Astro 3.0 is accessible now on npm. Go to astro.new to check out Astro 3.0 in your browser, or run the next command in your terminal to get began in a brand new undertaking:
# Create a brand new Astro 3.0 undertaking:
npm create astro@newest
Upgrading an present undertaking to Astro 3.0? Take a look at the v3.0 Upgrade Guide for full particulars and particular person improve steering for every change.
Astro View Transitions
View Transitions are a set of latest platform APIs that unlock native browser transition results between pages. Traditionally this has solely been potential in Single Web page Functions (SPAs), however internet browsers and spec authors have been working arduous over the previous couple of years to carry native web page transitions to the platform, and Astro 3.0 is the primary internet framework to carry them to the mainstream.
With Astro View Transitions, you may:
- Morph persistent parts from one web page to a different
- Fade content material on and off the web page, for a much less jarring navigation impact
- Slide content material on and off the web page, for a bit extra persona
- Persist frequent UI throughout pages, with or with out a refresh
One of the best half about View Transitions in Astro is how easy they’re to make use of. With simply 2 strains of code, you may add a refined — but tasteful! — fade animation to your web site. To attempt it your self, import the ViewTransitions
element and add to inside any web page’s <head>
aspect:
---
// src/pages/index.astro
// Observe: Ensure you add the "<ViewTransitions />" element
// to different pages as effectively, and never only one.
import {ViewTransitions} from 'astro:transitions';
---
<head>
<title>My View Transition Demo</title>
<ViewTransitions />
</head>
<physique>
<!-- -->
</physique>
Astro customers have had early entry to View Transitions since Astro 2.9. Our group has been experimenting ever since, offering early suggestions that helped form this closing API you see at present. Listed here are a number of of our favourite demos from the group, to provide you a way of what’s now potential:
Every demo looks like a local, client-side utility. However they aren’t. It’s all server-rendered HTML, dropped at life with Astro 3.0 and the brand new View Transitions API.
We’ve put a ton of effort in to make View Transitions work nice throughout all browsers, even people who don’t yet support the native View Transition APIs. Astro 3.0 consists of fallbacks for many browsers, within the type of a small, ~3kb script that Astro provides to your web page mechanically.
Be taught extra about View Transitions in our useful View Transitions guide, or this great article about the browser APIs by the Chrome group. Additionally learn extra about our journey to undertake View Transitions on the Chrome Developer blog.
Sooner Rendering Efficiency
Rendering efficiency noticed a significant carry in Astro 3.0, with most elements rendering 30% quicker (vs. Astro 2.9). In complex benchmarks, the velocity enchancment may be as excessive as 75%.
Reaching this sort of speed-up was the results of a devoted refactoring effort that was kicked off in Astro 2.10 and carried over the road for Astro 3.0. We eliminated as a lot pointless code as potential from sizzling paths in our construct pipeline and optimized what remained. Pointless turbines and async code have been two of the most important culprits. Each millisecond counts!
Picture Optimization (secure)
Picture optimization is now secure in Astro 3.0 and accessible in all tasks.
You’ll be able to import photos out of your codebase and place them on the web page with the brand new built-in <Picture>
element. Astro will deal with the remaining: the construct pipeline will mechanically detect and optimize every picture for you. The ultimate rendered picture tag could have an inferred width & peak added for you, to stop structure shift with computerized Cumulative Layout Shift (CLS) safety.
---
// Import the <Picture /> element
import { Picture } from "astro:belongings"
// Import a reference to the picture itself
import myImage from "../belongings/penguin.png"
---
<Picture src={myImage} alt="A really cool penguin!" />
We final wrote about image optimization again in June. Since then, we’ve landed a number of necessary enhancements together with:
- Full assist for Vercel’s built-in image service. Add
imageService: true
to your Vercel integration configuration to see your manufacturing photos optimized by means of their international CDN. - Migrating to Sharp as our new default optimization library. Sharp replaces our earlier default
@squoosh/lib
which is no longer maintained. - Assist for optimizing distant photos. Content material groups can proceed to handle their photos utilizing their present workflows and CMS instruments.
Be taught extra about Picture Optimization in our new Images guide.
SSR Enhancements for Serverless
On Monday we introduced a brand new, official hosting partnership with Vercel. Collaboration with Vercel allowed us to make vital enhancements to our SSR story in Astro 3.0. These new options profit all customers, no matter the place they select to host their web site:
- Per-Route Code Splitting – Create smaller, particular person server recordsdata for every route in your web site. Serverless customers (Vercel, Netlify, Cloudflare, and many others.) can now see improved efficiency by lowering the loading of unused code on each request.
- Edge Middleware – Astro can now bundle your middleware for deployment on the sting. Edge middleware is distributed globally and runs on servers which are as near your customers as potential.
- Host Customization: Since no two internet hosting suppliers are alike, we’ve added an API to Astro that helps customers higher perceive these variations. Internet hosting adapters (like
@astrojs/node
and@astrojs/vercel
) can now inform Astro which options they assist. Astro can use this data to floor extra helpful, informative warnings throughout improvement and forestall sudden manufacturing errors.
These options are all accessible at present on Vercel, however any internet hosting adapter may be upgraded so as to add assist. Over the approaching months, we’ll be working with our group maintainers to assist carry these options to any internet hosting platforms that may assist them.
HMR Enhancements for JSX
React Fast Refresh now works in Astro 3.0 because of a significant refactoring of our inner JSX construct assist. React, Preact, and Stable.js customers ought to all see a big enchancment to Sizzling Module Reloading (HMR) and total dev server stability in Astro 3.0.
Quick Refresh is a contemporary improvement characteristic the place native adjustments are intelligently pushed to the browser with out a web page refresh. What makes Quick Refresh distinctive (vs. common HMR) is that these updates are pushed to the browser with out altering the present state of the UI.
Within the demo under, take note of how the web page by no means refreshes and the counter by no means resets to zero, regardless of the developer updating the template itself. That’s Quick Refresh.
For those who’ve ever constructed a modal or another multi-step UI, then you definately most likely have skilled the frequent frustration of seeing your web page state refresh and reset after each change. Quick Refresh solves this drawback, rushing up your improvement workflow.
Optimized Construct Output
We’ve made a number of enhancements to the general construct output in 3.0, together with:
- HTML Minification: Astro 3.0 will now minify all HTML output mechanically. Minified HTML leads to a smaller payload over the wire and a quicker total response time.
- Element IDs: These noisy
astro-XXXXXX
class names have been changed with a brand new, devoteddata-astro-cid-hash
HTML attribute. This alteration leaves yourclass=""
attributes extra readable, with a extra organized HTML output total. - CSS Inlining: Astro 3.0 will now mechanically inline small chunks of CSS into your HTML. This improves web page load efficiency vs. older variations of Astro the place a web page may load many smaller CSS recordsdata as separate requests from the browser.
Strive Astro 3.0 In the present day
Astro 3.0 is accessible now on npm. Go to https://astro.new/ to check out Astro 3.0 in your browser, or run the next command in your terminal to get began in a brand new undertaking:
# Create a brand new Astro 3.0 undertaking:
npm create astro@newest
Upgrading an present undertaking to Astro 3.0? Take a look at the v3.0 Upgrade Guide for full particulars and particular person improve steering for every change.