Official website of article source:
https://astro.build/blog/astro-4/
Hello everyone! Today, I want to introduce you to a major update - Astro 4.0! This version not only brings a new API, faster build speeds, a completely revamped documentation design, and a unique new development tool that greatly enhances the local development environment experience.
First, let’s briefly understand what Astro is. Astro is a web framework built specifically for content-driven websites such as blogs, marketing and e-commerce websites. If you need a website that loads quickly and has great SEO performance, Astro is what you need.
Astro 4.0 Highlights
Astro Developer Toolbar: A new native browser development experience enhancement tool.
Internationalization (i18n) routing: Supports building globally accessible websites.
Incremental content caching (experimental feature): Dramatically improves build performance for large websites.
New View Transformation API: Add dynamic interactive experiences to websites.
Redesigned logging and documentation: Improving the developer experience.
Astro 4.0 is now available on npm. You can try Astro 4.0 directly in your browser by visiting astro.new, or run the following command in the terminal to start a new project:
# 创建一个新的Astro 4.0项目：
npm create astro@latestMost existing code bases will have no issues upgrading to Astro 4.0. We intentionally designed this release to have as few API changes as possible, with most changes focused on the integration API. Check out the upgrade guide for complete information and detailed descriptions of each change.
https://docs.astro.build/en/guides/upgrade-to/v4/
Astro Developer Toolbar:
Astro 4.0 introduces the Dev Toolbar - a powerful new way to enhance and customize your native browser development experience with Astro. Inspect your pages to identify tricky accessibility issues, and extend the toolbar itself with custom apps and third-party tools.
This toolbar will only appear in the browser during development and will not be included in the final product build.
It's hidden at the bottom of the page and pops up when you get close, offering a number of different apps:
Inspect:Highlights the interactive UI component "island" on the page. This tool application is designed to take advantage of Astro's unique "island" architecture. By highlighting the "islands" on the page, it helps you understand which elements are interactive and which are lightweight, static HTML. From here, you can view properties and click to open the component directly in the code editor.
Audit: Run a series of tests to audit your pages for common accessibility issues. Instantly capture images without alt text or misconfigured ARIA character attributes without leaving the browser.
Sentry: We worked with Sentry to design the initial version of this toolbar. Sentry, the leader in web application monitoring platforms, is excited to partner with us on a new standalone debugging tool called Spotlight.js. Come back on December 6th to learn more about our collaboration and the official launch of Spotlight.js!
Storyblok: Storyblok — our official CMS partner — has also launched a toolbar app for its Astro integration. In Astro 4.0, all Storyblok users will see a new app in the toolbar that provides quick access to documentation, tutorials, and Storyblok + Astro community resources. Look forward to more CMS features being added in the future.
Third-party applications: Astro developers and third-party integration authors can leverage the new Developer Toolbar API to build their own embedded JavaScript applications for the development environment. This opens up a whole new way of building development tools that enable:
Display test and linting errors directly in the browser.
Expose your development environment to the public internet via localtunnel.
Easy access to external tools like Squoosh image optimizer.
Automate common tasks like switching user accounts during development with an internal team admin panel.
Discover new toolbar apps in the Astro integration catalog and learn how to build your own. Over the next few months, we will continue to enhance the toolbar, adding new features and third-party APIs. Alternatively, you can update your configuration to disable the application toolbar in your project and run astro preferences disable devToolbar --global to disable the toolbar globally on your machine.
Internationalized (i18n) routing:
Astro 4.0 introduces new international routing capabilities to help you build globally accessible websites with less complexity. Take advantage of Astro's new features like automatic i18n routing and low-level helper functions for handling URLs.
Astro's new built-in routing support allows you to define your regions via central configuration:
import { defineConfig } from "astro/config"
export default defineConfig({
i18n: {
defaultLocale: "en",
locales: ["en", "es", "pt-br"]
}
})Custom behaviors include: fallback mechanism when content in a certain region is unavailable, prefix behavior for adding region names to URLs, and alias processing for common region and language codes.
For "server" builds with server-side rendering (SSR), Astro automatically detects the user's preferred language so you can further customize content, add redirects, or further customize route handling.
Internationalized routing support was originally added as an experimental feature in Astro 3.5. Today, it's entering the stable version of Astro 4.0. Read the new Astro internationalization guide to learn more and try out the new API.
https://docs.astro.build/en/guides/internationalization/
Incremental content caching (experimental):
Astro 4.0 introduces incremental content caching as an experimental new feature that significantly improves build performance for large websites.
As the codebase grows over time, it often takes longer to build the website's codebase. Static websites suffer from this problem more severely since the same pages are regenerated every time they are built. In Astro 4.0, we decided to introduce caching to help reduce the amount of repetitive, unnecessary work done within the astro build command.
After enabling content caching on the real-world Astro Docs codebase, the relevant step in the astro build dropped from 133.20 seconds to 10.46 seconds, a speedup of approximately 92%. End-to-end build time was reduced from 4 minutes and 58 seconds to just over 60 seconds, reducing overall build time by 80%. We have seen similar impressive results in other real-world scenarios.
Incremental content caching hooks into the Content Collections API. Because Astro has APIs for accessing and managing content within collections, our builds are able to securely track changes within collections using internal build manifests. Astro can check the cache for each build and reuse unchanged content entries.
Experimental support for incremental content caching was first introduced in Astro 3.5 under the name "Content Collections Build Cache". This feature remains experimental in 4.0 as we continue to finalize caching behavior. If you want to give it a try, enable experimental.contentCollectionCache in your project configuration now to speed up your builds.
New view transition API (View Transition):
Astro 3.0 introduces view transitions for the first time as a new API for building interactive, app-like experiences using only server-side rendered HTML and minimal client-side JavaScript. With Astro's view transformation, you can achieve the following functions:
Animate navigation between different pages without loading a huge SPA.
Maintain stateful UI between pages, such as video players and maps.
Automatically transform common elements from one page to another.
Give your page more personality by sliding and fading elements.
We've continued to improve our support for view transformations since they were first introduced. Astro 4.0 further develops view transformations, bringing more configurable APIs and new exciting use cases:
Forms: View transitions can now interact with static HTML forms and dynamic client-side form components, triggering transitions on form submission instead of link navigation.
Prefetching: You can now specify that links should be prefetched on hover, tap, or appearance on the page. You can also enable/disable prefetching on individual links.
Route Advertiser: A built-in feature for assistive technologies.
A low-level navigate() JavaScript API that you can use to manually trigger navigation.
Complete lifecycle event system that you can plug in to customize loading. You can even use this feature to replace the built-in element swapping algorithm.
We will continue to promote the power of view transitions and the experiences they provide that are comparable to heavy client-side SPAs using only server-rendered HTML and a small amount of JavaScript. More features and improvements are on the way!
The Astro core team would like to extend a special thanks to @martrapp for his contribution and work in introducing these new APIs in Astro 4.0. Read the updated view conversion guide or the new tutorial to learn more about how to use these new APIs in your own projects.
https://docs.astro.build/en/guides/view-transitions/
https://docs.astro.build/en/tutorials/add-view-transitions/
Redesigned logging:
In version 4.0, Astro CLI has undergone a new revision, bringing a redesigned logging experience. Highlights include:
Remove unnecessary logging: Previously, some common scenarios resulted in double logging and other unnecessary logging.
Succinct error messages: Error messages now take up fewer lines in the terminal, meaning there's less to scroll through in smaller terminals when something goes wrong.
Refined stack traces: Errors no longer include useless information from within the Vite runtime by default.
These results make Astro's development and build commands easier to read, parse, and debug in the new Astro 4.0.
Redesigned documentation:
Starlight is Astro's official documentation template. It contains all the best practices and patterns we've gathered over the past two years building and managing Astro documentation website scale.
Today, we've come full circle: docs.astro.build is now powered by Starlight!
Now that we have switched to Starlight, any improvements we make to our documentation site will be fed back to Starlight for everyone to benefit from. Thanks to Astro documentation, Starlight now has features like expressive coding and the new Algolia plugin. There are more new components coming in the future, like our interactive file tree and multiple-choice quizzes.
We would like to recognize Astro core maintainer @TheOtterlord for his significant contribution in completing this upgrade. Visit the new documentation site docs.astro.build. If you want to learn more, feel free to browse the codebase or join our Discord!
http://docs.astro.build/
https://github.com/withastro/docs
Get started with Astro 4.0
Astro 4.0 is now available on npm. You can try Astro 4.0 directly in your browser by visiting astro.new, or run the following command in the terminal to start a new project
# Create a new Astro 4.0 project:
npm create astro@latestUpgrading existing projects to Astro 4.0? Check out the v4.0 Upgrade Guide for complete details of each change and individual upgrade guides.
https://docs.astro.build/en/guides/upgrade-to/v4/
Due to the limited space of the article, today’s content will be shared here. At the end of the article, I would like to remind you that the creation of articles is not easy. If you like my sharing, please don’t forget to like and forward it to let more people in need See. At the same time, if you want to gain more knowledge about front-end technology, please follow me. Your support will be my biggest motivation for sharing. I will continue to output more content, so stay tuned.