Today we’ve released the first beta of Astro 4! Those feeling adventurous can install the new beta, review our in-progress upgrade docs, and report any bugs you find to the Astro discord.
What to expect in Astro 4
As Vite 5 is also a small major, most projects will be able to upgrade to Astro 4 with only minimal changes to your code if any at all.
Additionally, in Astro 4 we are planning to bring some of the new features we have been working on over the last few months out of experimental status and mark them as stable. Stay tuned for more!
Trying out the beta
You can try out the beta in your existing app by running our new
@astrojs/upgrade package. This CLI tool will automatically install the correct version of Astro as well as any official Astro integrations you have installed.
npx @astrojs/upgrade betapnpm dlx @astrojs/upgrade betayarn dlx @astrojs/upgrade beta
Alternatively, you can manually install the
astro@beta package. Be sure to also update any
@astrojs/* integrations you have installed!
npm install astro@betapnpm install astro@betayarn install astro@beta
If starting a new project you can also try out the beta by running:
npm create astro@latest -- --ref next
Again, substitute with your favorite package manager. We have not completed the upgrade guide yet, but you can already find the most significant changes in the Astro 4.0 upgrade guide pull request. You can also follow its related issue which is tracking all breaking changes.
Additionally, we’ve recently released Astro 3.6 which comes with new events in the
<ViewTransitions /> router as well as fallback for
prefetch in reduced data scenarios.
View Transition events
Astro 3.6 adds these three new events as part of the
<ViewTransitions /> router’s lifecycle:
astro:before-preparation runs immediately before the preparation step, where the content of the new page is loaded. This can be used to override the behavior of loading the new page, for example, to show a loading spinner.
astro:after-preparation runs after the content has been loaded. This can be used to stop a loading spinner if one was added as part of
astro:before-swap runs immediately before the swap step, where the contents of the old page are swapped out in favor of the contents of the new page. This event includes the
event.newDocument property, a
Document that you can mutate. One use-case for this event is to set dark mode class names if using
localStorage to store light/dark mode preferences.
Previously when a user was on a slow connection or had the data saver preference enabled, prefetching was entirely disabled. In 3.6 we’ve changed the prefetch strategy to occur on
tap: when the user begins clicking a link, but before they have released. This gives us just a little bit of a head start on fetching the next page, but only when we’re pretty sure the user intends to click.
Additional bug fixes are included in this release. Check out the release notes to learn more.