Supercharge your Astro 4.0 site with the new Netlify Adapter

Earlier this month, the Astro team released 4.0 of the Astro framework. Amongst other improvements, it comes with a Dev Toolbar, internationalization support and a new docs page.

We’ve also been hard at work at improving our Astro support, and we’re happy to announce the release of version 4.0 of the Netlify adapter for Astro. Here’s what’s new:

Improvements to Server-Side Rendering (SSR)

HTML Streaming

In October, we shipped Netlify Functions 2.0, and the new Astro adapter fully leverages them.

This means Astro pages now support HTML streaming. Here’s how the Astro docs explain it:

With HTML streaming, a document is broken up into chunks, sent over the network in order, and rendered on the page in that order. In server or hybrid mode, Astro uses HTML streaming to send each component to the browser as it renders them. This makes sure the user sees your HTML as fast as possible, although network conditions can cause large documents to be downloaded slowly, and waiting for data fetches can block page rendering.

Enabling this in your site by following Astro’s guide about it leads to improvements in Time to first Byte (TTFB) and First Contentful Paint (FCP).

Access to Request Context

Besides that, we’re also now making the context object from Functions 2.0 & Edge Functions available to your Astro pages via Astro.locals.netlify.context. You can use this, for example, to access the geolocation of the requesting browser:

const { city } = Astro.locals.netlify.context.geo;

<p>Greetings to {city}, fellow citizen of the world!</p>

Refer to Netlify’s docs to learn more about the context object.

Fine-Grained Cache Control

Last quarter, we shipped Fine-Grained Cache Control. This is our standards-compliant implementation of the CDN-Cache-Control directives, including stale-while-revalidate support. This is straightforward, because you can set them right from your Astro pages - just like any other standard header! For example, the following code snippet caches a page at the edge and transparently updates the cached response at most every 60 seconds without impacting response latency:

const data = await expensivelyQueryDatabase(...)

Astro.response.headers.set('CDN-Cache-Control', 'public, max-age=60, stale-while-revalidate');

<p>Somehow show your {data}</p>

Because you can control caching on a per-page basis, this allows you to create highly-performant and highly dynamic sites, all by setting a few headers in your Astro pages. And if you need even more control, you can invalidate those caches using Cache-Tags and the Purge API.

Image CDN

Last month, we also released Netlify Image CDN in beta - a dead-simple feature to resize, crop and transform images. The new Astro adapter fully makes use of Image CDN, without needing you to implement anything. It’s implemented using an Astro Image Service under the hood, and will provide both:

1. Improved build time: image transformation is offloaded to the CDN, so it doesn’t need to be performed at build-time anymore
2. Improved page speed: unlike with static transformations, the CDN now automatically serves each user the right image format for their browser.

The best thing: You don’t need to do a thing, the new Astro adapter does everything for you, by default.

Closing Thoughts

Besides all those exciting user-facing changes in the v4 Adapter, we significantly simplified its implementation - hopefully leading to less bugs and easier maintenance. The full changelog + migration guide, can be found on the @astrojs/netlify@4 release page. We’ll also be around in the issues to help y’all with migrating to the new Adapter.

Working with the Astro maintainers on this new version of the adapter was wonderful, and we’ll be joining them as maintainers for the adapter. Netlify continues to invest into even more powerful and usable core platform primitives, and collaborating with frameworks to ensure they leverage our platform to its fullest.

Astro is a great framework with an even more promising roadmap, and the data in recently-published State of Web Development Report supports that. We can’t wait to see what Astro brings next year!

Speaking of next year: We wish you a Merry Christmas, and a happy new year!