Astro JS - Netlify Adapter

What is Netlify?

Netlify is a cloud computing service that offers web hosting and serverless backend functions for static websites and web applications. It provides a platform for developers to build, deploy, and easily manage modern web projects.

Key Features of Netlify

Some of the key features of Netlify are:

• Continuous Deployment: Netlify supports continuous deployment which means, it automatically deploys changes from your Git repository to the live site.
• Serverless Functions: Netlify Functions allow you to run server-side code without managing servers.
• Global CDN: Netlify uses a global content delivery network (CDN) to deliver content faster to users around the world.
• Forms Handling: Netlify Forms allows you to handle form submissions without setting up a backend server.

Netlify Adapter For Astro

The Netlify adapter in astro enhances the Astro build process and prepare the project for deployment through Netlify. The HTML pages and on-demand rendered routes will be deployed directly to Netlify. The astro will generate a Netlify configuration file that will serve the Astro application from the Netlify platform. Now let's see how to set up Netlify adapter in Astro.

Step 1: Install Netlify Adapter

First, you need to install the Netlify adapter for Astro. You can do this using the following command:

>> npm install @astrojs/netlify

Step 2: Configure Netlify in Astro

Next step is to apply the integration to your astro.config.mjs. Add the adapter and your desired on-demand rendering mode to your astro.config.mjs file:

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

export default defineConfig({
    // ...
    output: 'server',
    adapter: netlify(),
});

Accessing Edge Context

Netlify Edge Functions provide a context object that includes metadata about the request such as a user’s IP, geolocation data, and cookies. This can be accessed through the Astro.locals.netlify.context object. See the code below:

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

<h1>I'am From {city}!</h1>

Astro Middleware on Netlify

Middleware is mechanism that allows you to intercept and process incoming HTTP requests before they reach your page or API route. It is used to implement redirects, access control, custom response headers, and other tasks.

Any Astro middleware is applied to pre-rendered pages at build-time, and to on-demand-rendered pages at runtime. To implement redirects run your middleware on Netlify Edge Functions by enabling the edgeMiddleware option:

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

export default defineConfig({
    // ...
    output: 'server',
    adapter: netlify({
        edgeMiddleware: true,
    }),
});

Netlify Caching Pages

Netlify provides a way to cache pages and assets at the edge, which can improve the performance of your Astro application. The on-demand rendered pages without any dynamic content can be cached to improve performance and lower resource usage. Enabling the cacheOnDemandPages option in the adapter will cache all server-rendered pages for up to one year:

// File: astro.config.mjs

export default defineConfig({
    // ...
    output: 'server',
    adapter: netlify({
        cacheOnDemandPages: true,
    }),
});