Astro on Netlify Edge Functions

by Matthew Phillips

Two weeks ago, we announced experimental support for server-side rendering (SSR) with Netlify as our launch partner on Netlify Functions. Today, we’re announcing support for SSR on Netlify’s new Edge Functions platform. Edge Functions went live today and Astro has day 1 support.

With SSR and Astro, you can:

  • Build large, CMS-backed sites that are difficult to scale with SSG (static-site generation).
  • Build apps that need authentication or persistent state, such as E-commerce backends.
  • Use a simplified HTML-like syntax with sprinkles of JavaScript, only when you need it.

With edge rendering you bring SSR closer to your users, getting those first bytes to the browser, faster. Combined with serving static assets at the edge, this gives you optimal network performance. Astro is committed to making performant content sites easy to achieve, and Netlify’s new Edge Functions platform is an ideal place to deploy your Astro SSR applications today.

To get started, install the Netlify adapter:

npm install @astrojs/netlify

And then add the adapter in your astro.config.mjs file:

import { defineConfig } from 'astro/config';
import netlify from '@astrojs/netlify/edge-functions';

export default defineConfig({
	adapter: netlify()
});

Migrating from Netlify Functions

Astro is already available on Netlify Functions, a Node.js based serverless runtime. With Edge Functions you can get even better performance, and we’ve tried to make it as easy as possible to switch.

Compatibility

Netlify Edge Functions run on top of Deno, but most Astro applications do not need to change code to deploy to the new environment. The Netlify adapter takes care of compiling and bundling your source so that it can run on Deno.

If you are using dependencies that depend on Node.js’ built-in modules, it’s possible that you cannot move off of Netlify Functions. If so, Netlify Functions is still a great platform for most use-cases and provides a standard Node.js runtime for Node package support.

If you use the <Markdown /> component, it cannot presently run in non-Node environments. A possible alternative in the meantime is using .md pages.

Migration

First, upgrade to the latest @astrojs/netlify like so:

npm install @astrojs/netlify@latest

Then, update your astro.config.mjs to import the edge functions adapter:

import { defineConfig } from 'astro/config';
- import netlify from '@astrojs/netlify/functions';
+ import netlify from '@astrojs/netlify/edge-functions';

export default defineConfig({
	adapter: netlify()
});

And that should be it! The next time you build, it will generate an SSR build compatible with Edge Functions, which can then be deployed with netlify deploy --build.

Partnerships

Netlify was Astro’s launch partner for SSR. Even within the short time since that announcement we have seen tremendous support from other hosting platforms with adapters either already been built or in the works.

If you’d like to build an adapter for another platform, swing by our Discord channel and we’d be happy to help you along!