What's New in Astro 4.2

What is New in Astro 4.2

Astro, the dynamic static site generator, is back with a bang! Version 4.2 introduces a slew of experimental features, improvements to accessibility rules, and enhanced customization options. Let's dive into the highlights of this release that's set to elevate your web development experience.

Exciting Highlights

[Experimental] Support for Prerendering using Speculation Rules API

Astro 4.2 brings experimental support for prerendering pages using the Speculation Rules API. Thanks to Ross Robino, the prefetch feature now leverages the Chromium-exclusive Speculation Rules API, enabling client-side prerendering. This allows for faster browsing experiences and efficient client-side JavaScript execution on anticipated pages.

To enable this feature, add the following snippet to your astro.config.mjs file:

import { defineConfig } from 'astro/config';

export default defineConfig({
  prefetch: true,
  experimental: {
    clientPrerender: true,
  },
});

This addition respects your existing prefetch configuration while introducing the power of client-side prerendering. A fallback is included for browsers not yet supporting the Speculation Rules API.

For more details, check out the documentation on experimental.clientPrerender.

[Experimental] Reworked Routing Priority for Injected Routes

Historically, injected routes using the injectRoute() API had the highest priority, causing unexpected route matching issues. In Astro 4.2, an experimental flag introduces a new and improved default routing system.

To embrace this future change, add the following to your astro.config.mjs file:

import { defineConfig } from 'astro/config';

export default defineConfig({
  experimental: {
    globalRoutePriority: true,
  },
});

This change ensures that injected routes now follow the same priority order as routes from the filesystem, providing stable and consistent routing.

Additional logging has been implemented to alert you about any route collisions where two routes attempt to build the same URL. For more details, explore the experimental.globalRoutePriority documentation.

New redirectToDefaultLocale Config Option

Astro 4.2 introduces the redirectToDefaultLocale option, addressing a common request since the introduction of internationalization support in Astro 4.0. This option allows you to disable automatic redirects of the root URL (/) to the default locale when prefixDefaultLocale: true is set.

To implement this, modify your astro.config.mjs file as follows:

import { defineConfig } from 'astro/config';

export default defineConfig({
  i18n: {
    defaultLocale: "en",
    locales: ["en", "fr"],
    routing: {
      prefixDefaultLocale: true,
      redirectToDefaultLocale: false,
    },
  },
});

This empowers you to decide whether to redirect or not. The option is enabled by default.

Improved Accessibility Rules

Accessibility rules introduced in Astro 4.0 Dev Toolbar have received significant improvements. Thanks to Oliver Speir for refining these rules by closely following the WCAG guidelines. This ensures more accurate reporting of accessibility issues, eliminating false positives.

Customizable Image Optimization in Markdown

Now, remark plugins can customize how images are optimized in Markdown files. Previously, all images in Markdown files using the native syntax (![alt](src)) followed Astro's default optimization settings. With Astro 4.2, remark plugins can add properties to image nodes to tailor the optimization process.

For example, a remark plugin to set width and height properties of every image to 100 can be implemented as follows:

import { visit } from "unist-util-visit";

export default function remarkPlugin() {
  return (tree) => {
    visit(tree, 'image', (node) => {
      node.data.hProperties = node.data.hProperties || {};
      node.data.hProperties.width = "100";
      node.data.hProperties.height = "100";
    });
  };
}

This feature is currently exclusive to Markdown files, with potential future support for MDX.

How to Upgrade to Astro 4.2

To experience the latest features, ensure you're running the latest version of Astro. Upgrade to Astro 4.2 by executing the following commands based on your package manager:

• npm: npm install astro@latest
• pnpm: pnpm upgrade astro --latest
• yarn: yarn upgrade astro --latest

Wrapping Up

Astro 4.2 marks a significant milestone as it embraces a plethora of community-built features. With the support of an enthusiastic community, Astro is evolving into a powerhouse static site generator. A big shoutout to everyone who contributed to this release!

For detailed information on bug fixes and additional features, check out the Astro 4.2 release notes.

Upgrade to Astro 4.2 today and supercharge your web development journey!