Learn how to use Vercel's features with Astro. Astro is an all-in-one web framework that enables you to build performant static websites. People choose Astro when they want to build content-rich experiences with as little JavaScript as possible.
You can deploy a static Astro app to Vercel with zero configuration.
Get Started with Astro on Vercel
To get started with Astro on Vercel:
If you already have a project with Astro, install Vercel CLI and run the vercel command from your project's root directory.
Clone one of our Astro example repos to your favorite git provider and deploy it on Vercel with the button below:
To deploy a server-rendered Astro app or a static Astro site with Vercel features like Web Analytics and Image Optimization, follow these steps:
Add Astro's Vercel adapter to your project using either of the following methods:
# Using astro add (recommended)
pnpm astro add vercel
Or manually install the package:
pnpm i @astrojs/vercel
Configure your project in astro.config.ts. Import either the serverless or static plugin, and set the output to server or static respectively:
import { defineConfig } from 'astro/config';
import vercelServerless from '@astrojs/vercel/serverless';
export default defineConfig({
output: 'server',
adapter: vercelServerless(),
});
Enable Vercel's features using Astro's configuration options. Here's an example enabling Web Analytics and setting a maximum duration for Serverless Function routes:
imageService: (boolean, Static, Serverless) - Enables an automatically configured service to optimize your images (for Astro versions 3 and up).
devImageService: (string, Static, Serverless) - Configures the image service used to optimize your images in your dev environment (for Astro versions 3 and up).
imagesConfig: (VercelImageConfig, Static, Serverless) - Defines the behavior of the Image Optimization API, allowing on-demand optimization at runtime.
functionPerRoute: (boolean, Serverless) - API routes are bundled into one function by default. Set this to true to split each route into separate functions.
edgeMiddleware: (boolean, Serverless) - Set to true to automatically convert Astro middleware to Edge Middleware.
includeFiles: (string[], Serverless) - Force files to be bundled with your Serverless functions.
excludeFiles: (string[], Serverless) - Exclude files from being bundled with your Serverless functions. Also available with .vercelignore.
For more details on the configuration options, see Astro's docs.
Server-Side Rendering
Using SSR, or on-demand rendering as Astro calls it, enables you to deploy your routes as Serverless Functions on Vercel. This allows you to add dynamic elements to your app, such as user logins and personalized content.
You can enable SSR by adding the Vercel adapter to your project.
If your Astro project is statically rendered, you can opt individual routes. To do so:
Set your output option to hybrid in your astro.config.ts:
Statically rendered, or pre-rendered, Astro apps can be deployed to Vercel with zero configuration. To enable Vercel features like Image Optimization or Web Analytics, see Using Vercel's features with Astro.
You can opt individual routes into static rendering with export const prerender = true as shown below:
Serverless Functions use resources that scale up and down based on traffic demands. When you enable SSR with Astro's Vercel adapter, all of your routes will be server-rendered as Serverless Functions by default. Astro's Server Endpoints are the best way to define Serverless API routes with Astro on Vercel.
When defining an Endpoint, you must name each function after the HTTP method it represents. The following example defines basic HTTP methods in a Server Endpoint:
// src/pages/methods.json.ts
import { APIRoute } from 'astro/dist/@types/astro';
export const GET: APIRoute = ({ params, request }) => {
return new Response(
JSON.stringify({
message: 'This was a GET!',
}),
);
};
export const POST: APIRoute = ({ request }) => {
return new Response(
JSON.stringify({
message: 'This was a POST!',
}),
);
};
export const DELETE: APIRoute = ({ request }) => {
return new Response(
JSON.stringify({
message: 'This was a DELETE!',
}),
);
};
// ALL matches any method that you haven't implemented.
export const ALL: APIRoute = ({ request }) => {
return new Response(
JSON.stringify({
message: `This was a ${request.method}!`,
}),
);
};
Edge Functions are a fast, scalable solution for delivering dynamic content to users
. By default, Edge Functions are deployed globally, and will be invoked in one of Vercel's Edge regions near your site's visitors.
Astro does not currently support Edge Functions natively, however you can use the /api directory to define Edge Functions with any framework on Vercel. See the Edge Functions quickstart to get started.
Edge Functions with Nuxt on Vercel:
Offer cost savings by using fewer resources than Serverless Functions
Can execute in the region nearest to your users or nearest to data sources they depend on, based on your configuration
Have access to the geolocation and IP address of visitors, enabling location-based personalization
Image Optimization helps you achieve faster page loads by reducing the size of images and using modern image formats. When deploying to Vercel, images are automatically optimized on demand, keeping your build times fast while improving your page load performance and Core Web Vitals.
Image Optimization with Astro on Vercel is supported out of the box with Astro's Image component. See the Image Optimization quickstart to learn more.
Image Optimization with Astro on Vercel:
Requires zero-configuration for Image Optimization when using Astro's Image component
Helps your team ensure great performance by default
Keeps your builds fast by optimizing images on-demand
Edge Middleware is code that executes before a request is processed on a site, enabling you to modify the response. Because it runs before the cache, Edge Middleware is an effective way to personalize statically generated content.
Astro middleware allows you to set and share information across your endpoints and pages with a middleware.ts file in your src directory. The following example edits the global locals object, adding data which will be available in any .astro file:
// src/middleware.ts
// This helper automatically types middleware params
import { defineMiddleware } from 'astro:middleware';
export const onRequest = defineMiddleware(({ locals }, next) => {
// intercept data from a request
// optionally, modify the properties in `locals`
locals.title = 'New title';
// return a Response or the result of calling `next()`
return next();
});
Astro middleware is not the same as Vercel's Edge Middleware, which has to be placed at the root directory of your project, outside src.
To add custom properties to locals in middleware.ts, you must declare a global namespace in your env.d.ts file:
You can then access the data you added to locals in any .astro file, like so:
// src/pages/middleware-title.astro
const { title } = Astro.locals;
<h1>{title}</h1>
<p>The name of this page is from middleware.</p>
Deploying middleware at the Edge
You can deploy Astro's middleware at the Edge, giving you access to data in the RequestContext and Request, and enabling you to use Vercel's Edge Middleware helpers, such as geolocation() or ipAddress().
To use Astro's middleware at the Edge, set edgeMiddleware: true in your astro.config.ts file:
If you're using Vercel's Edge Middleware, you do not need to set edgeMiddleware: true in your astro.config.ts file.
See Astro's docs on the limitations and constraints for using middleware at the Edge, as well as their troubleshooting tips.
Using Astro.locals in Edge Middleware
The Astro.locals object exposes data to your .astro components, allowing you to dynamically modify your content with middleware. To make changes to Astro.locals in Astro's middleware at the edge:
Add a new middleware file next to your src/middleware.ts and name it src/vercel-edge-middleware.ts. This file name is required to make changes to Astro.locals. If you don't want to update Astro.locals, this step is not required.
Return an object with the properties you want to add to Astro.locals.
For TypeScript, you must install the @vercel/edge package:
pnpm i @vercel/edge
Then, type your middleware function like so:
// src/vercel-edge-middleware.ts
import type { RequestContext } from '@vercel/edge';
// Note the parameters are different from standard Astro middleware
export default function ({
request,
context,
}: {
request: Request;
context: RequestContext;
}) {
// Return an `Astro.locals` object with a `title` property
return {
title: "Spider-man's blog",
};
}
Using Vercel's Edge Middleware
Astro's middleware, which should be in src/middleware.ts, is distinct from Vercel Edge Middleware, which should be a middleware.ts file at the root of your project.
Vercel recommends using framework-native solutions. You should use Astro's middleware over Vercel's Edge Middleware wherever possible.
If you still want to use Vercel's Edge Middleware, see the Quickstart to learn how.
Rewrites
Rewrites only work for static files with Astro. You must use Vercel's Edge Middleware for rewrites. You should not use vercel.json to rewrite URL paths with astro projects; doing so produces inconsistent behavior, and is not officially supported.
Redirects
In general, Vercel recommends using framework-native solutions, and Astro has built-in support for redirects. That said, you can also do redirects with Vercel's Edge Middleware.
Redirects in your Astro config
You can do redirects on Astro with astro.config.ts using the redirects config option as shown below:
You can redirect from within Astro components with Astro.redirect():
// src/pages/account.astro
import { isLoggedIn } from '../utils';
const cookie = Astro.request.headers.get('cookie');
// If the user is not logged in, redirect them to the login page
if (!isLoggedIn(cookie)) {
return Astro.redirect('/login');
}
<h1>You can only see this page while logged in</h1>
Certainly! Here is the provided documentation formatted in Markdown:
# Serverless Functions
Serverless Functions use resources that scale up and down based on traffic demands. This makes them reliable during peak hours but low cost during slow periods.
When you enable SSR with Astro's Vercel adapter, all of your routes will be server-rendered as Serverless Functions by default. Astro's Server Endpoints are the best way to define Serverless API routes with Astro on Vercel.
When defining an Endpoint, you must name each function after the HTTP method it represents. The following example defines basic HTTP methods in a Server Endpoint:
```typescript
// src/pages/methods.json.ts
import { APIRoute } from 'astro/dist/@types/astro';
export const GET: APIRoute = ({ params, request }) => {
return new Response(
JSON.stringify({
message: 'This was a GET!',
}),
);
};
export const POST: APIRoute = ({ request }) => {
return new Response(
JSON.stringify({
message: 'This was a POST!',
}),
);
};
export const DELETE: APIRoute = ({ request }) => {
return new Response(
JSON.stringify({
message: 'This was a DELETE!',
}),
);
};
// ALL matches any method that you haven't implemented.
export const ALL: APIRoute = ({ request }) => {
return new Response(
JSON.stringify({
message: `This was a ${request.method}!`,
}),
);
};
Astro removes the final file during the build process, so the name of the file should include the extension of the data you want to serve (for example, example.png.js will become /example.png).
Edge Functions are a fast, scalable solution for delivering dynamic content to users. By default, Edge Functions are deployed globally and will be invoked in one of Vercel's Edge regions near your site's visitors.
Astro does not currently support Edge Functions natively, however, you can use the /api directory to define Edge Functions with any framework on Vercel. See the Edge Functions quickstart to get started.
Edge Functions with Nuxt on Vercel:
Offer cost savings by using fewer resources than Serverless Functions
Can execute in the region nearest to your users or nearest to data sources they depend on, based on your configuration
Have access to the geolocation and IP address of visitors, enabling location-based personalization
Image Optimization helps you achieve faster page loads by reducing the size of images and using modern image formats. When deploying to Vercel, images are automatically optimized on demand, keeping your build times fast while improving your page load performance and Core Web Vitals.
Image Optimization with Astro on Vercel is supported out of the box with Astro's Image component. See the Image Optimization quickstart to learn more.
Image Optimization with Astro on Vercel:
Requires zero-configuration for Image Optimization when using Astro's Image component
Helps your team ensure great performance by default
Keeps your builds fast by optimizing images on-demand
Edge Middleware is code that executes before a request is processed on a site, enabling you to modify the response. Because it runs before the cache, Edge Middleware is an effective way to personalize statically generated content.
Astro middleware allows you to set and share information across your endpoints and pages with a middleware.ts file in your src directory. The following example edits the global locals object, adding data that will be available in any .astro file:
// src/middleware.ts
// This helper automatically types middleware params
import { defineMiddleware } from 'astro:middleware';
export const onRequest = defineMiddleware(({ locals }, next) => {
// intercept data from a request
// optionally, modify the properties in `locals`
locals.title = 'New title';
// return a Response or the result of calling `next()`
return next();
});
Astro middleware is not the same as Vercel's Edge Middleware, which has to be placed at the root directory of your project, outside src.
To add custom properties to locals in middleware.ts, you must declare a global namespace in your env.d.ts file:
You can then access the data you added to locals in any .astro file, like so:
// src/pages/middleware-title.astro
---
const { title } = Astro.locals;
---
<h1>{title}</h1>
<p>The name of this page is from middleware.</p>
Deploying middleware at the Edge
You can deploy Astro's middleware at the Edge, giving you access to data in the RequestContext and Request and enabling you to use Vercel's Edge Middleware helpers, such as geolocation() or ipAddress().
To use Astro's middleware at the Edge, set edgeMiddleware: true in your astro.config.ts file:
If you're using Vercel's Edge Middleware, you do not need to set edgeMiddleware: true in your astro.config.ts file.
See Astro's docs on the limitations and constraints for using middleware at the Edge, as well as their troubleshooting tips.
Using Astro.locals in Edge Middleware
The Astro.locals object exposes data to your .astro components, allowing you to dynamically modify your content with middleware. To make changes to Astro.locals in Astro's middleware at the edge:
Add a new middleware file next to your src/middleware.ts and name it src/vercel-edge-middleware.ts. This file name is required to make changes to Astro.locals. If you don't want to update Astro.locals, this step is not required.
Return an object with the properties you want to add to Astro.locals.
For TypeScript, you must install the @vercel/edge package:
pnpm i @vercel/edge
Then, type your middleware function like so:
// src/vercel-edge-middleware.ts
import type { RequestContext } from '@vercel/edge';
// Note the parameters are different from standard Astro middleware
export default function ({
request,
context,
}: {
request: Request;
context: RequestContext;
}) {
// Return an Astro.locals object with a title property
return {
title: "Spider-man's blog",
};
}
Using Vercel's Edge Middleware
Astro's middleware, which should be in src/middleware.ts, is distinct from Vercel Edge Middleware, which should be a `
middleware.ts` file at the root of your project.
Vercel recommends using framework-native solutions. You should use Astro's middleware over Vercel's Edge Middleware wherever possible.
If you still want to use Vercel's Edge Middleware, see the Quickstart to learn how.
Rewrites
Rewrites only work for static files with Astro. You must use Vercel's Edge Middleware for rewrites. You should not use vercel.json to rewrite URL paths with Astro projects; doing so produces inconsistent behavior and is not officially supported.
Redirects
In general, Vercel recommends using framework-native solutions, and Astro has built-in support for redirects. That said, you can also do redirects with Vercel's Edge Middleware.
Redirects in your Astro config
You can do redirects on Astro with astro.config.ts using the redirects config option as shown below:
You can redirect from within Astro components with Astro.redirect():
// src/pages/account.astro
---
import { isLoggedIn } from '../utils';
const cookie = Astro.request.headers.get('cookie');
// If the user is not logged in, redirect them to the login page
if (!isLoggedIn(cookie)) {
return Astro.redirect('/login');
}
---
<h1>You can only see this page while logged in</h1>
Astro Middleware on Vercel:
Executes before a request is processed on a site, allowing you to modify responses to user requests
Runs on all requests but can be scoped to specific paths through a matcher config
Uses Vercel's lightweight Edge Runtime to keep costs low and responses fast
Vercel automatically caches static files at the Edge after the first request and stores them for up to 31 days on Vercel's Edge Network. Dynamic content can also be cached, and both dynamic and static caching behavior can be configured with Cache-Control headers.
The following Astro component will show a new time every 10 seconds. It does so by setting a 10-second max age on the contents of the page, then serving stale content while new content is being rendered on the server when that age is exceeded.
Vercel Speed Insights provides you with a detailed view of your website's performance metrics, facilitating informed decisions for its optimization. By enabling Speed Insights, you gain access to the Speed Insights dashboard, which offers in-depth information about scores and individual metrics without the need for code modifications or leaving the dashboard.
To enable Speed Insights with Astro, see the Speed Insights quickstart.
To summarize, using Speed Insights with Astro on Vercel:
Enables you to track traffic performance metrics, such as First Contentful Paint, or First Input Delay
Enables you to view performance metrics by page name and URL for more granular analysis
Shows you a score for your app's performance on each recorded metric, which you can use to track improvements or regressions
Astro on Vercel
Learn how to use Vercel's features with Astro. Astro is an all-in-one web framework that enables you to build performant static websites. People choose Astro when they want to build content-rich experiences with as little JavaScript as possible.
You can deploy a static Astro app to Vercel with zero configuration.
Get Started with Astro on Vercel
To get started with Astro on Vercel:
vercel
command from your project's root directory.Clone one of our Astro example repos to your favorite git provider and deploy it on Vercel with the button below:
Using Vercel's features with Astro
To deploy a server-rendered Astro app or a static Astro site with Vercel features like Web Analytics and Image Optimization, follow these steps:
Add Astro's Vercel adapter to your project using either of the following methods:
Or manually install the package:
Configure your project in
astro.config.ts
. Import either the serverless or static plugin, and set the output to server or static respectively:Enable Vercel's features using Astro's configuration options. Here's an example enabling Web Analytics and setting a maximum duration for Serverless Function routes:
Configuration options
The following configuration options enable Vercel's features for Astro deployments:
maxDuration
: (number, Serverless) - Extends or limits the maximum duration (in seconds) that Serverless Functions can run before timing out.webAnalytics
: ({ enabled: boolean }, Static, Serverless) - Enables Vercel's Web Analytics.imageService
: (boolean, Static, Serverless) - Enables an automatically configured service to optimize your images (for Astro versions 3 and up).devImageService
: (string, Static, Serverless) - Configures the image service used to optimize your images in your dev environment (for Astro versions 3 and up).imagesConfig
: (VercelImageConfig, Static, Serverless) - Defines the behavior of the Image Optimization API, allowing on-demand optimization at runtime.functionPerRoute
: (boolean, Serverless) - API routes are bundled into one function by default. Set this to true to split each route into separate functions.edgeMiddleware
: (boolean, Serverless) - Set to true to automatically convert Astro middleware to Edge Middleware.includeFiles
: (string[], Serverless) - Force files to be bundled with your Serverless functions.excludeFiles
: (string[], Serverless) - Exclude files from being bundled with your Serverless functions. Also available with .vercelignore.For more details on the configuration options, see Astro's docs.
Server-Side Rendering
Using SSR, or on-demand rendering as Astro calls it, enables you to deploy your routes as Serverless Functions on Vercel. This allows you to add dynamic elements to your app, such as user logins and personalized content.
You can enable SSR by adding the Vercel adapter to your project.
If your Astro project is statically rendered, you can opt individual routes. To do so:
Set your output option to hybrid in your
astro.config.ts
:Add
export const prerender = false;
to your components:SSR with Astro on Vercel:
Static rendering
Statically rendered, or pre-rendered, Astro apps can be deployed to Vercel with zero configuration. To enable Vercel features like Image Optimization or Web Analytics, see Using Vercel's features with Astro.
You can opt individual routes into static rendering with
export const prerender = true
as shown below:Statically rendered Astro sites on Vercel:
astro.config.ts
Serverless Functions
Serverless Functions use resources that scale up and down based on traffic demands. When you enable SSR with Astro's Vercel adapter, all of your routes will be server-rendered as Serverless Functions by default. Astro's Server Endpoints are the best way to define Serverless API routes with Astro on Vercel.
When defining an Endpoint, you must name each function after the HTTP method it represents. The following example defines basic HTTP methods in a Server Endpoint:
Serverless Functions with Astro on Vercel:
Edge Functions
Edge Functions are a fast, scalable solution for delivering dynamic content to users
. By default, Edge Functions are deployed globally, and will be invoked in one of Vercel's Edge regions near your site's visitors.
Astro does not currently support Edge Functions natively, however you can use the
/api
directory to define Edge Functions with any framework on Vercel. See the Edge Functions quickstart to get started.Edge Functions with Nuxt on Vercel:
Image Optimization
Image Optimization helps you achieve faster page loads by reducing the size of images and using modern image formats. When deploying to Vercel, images are automatically optimized on demand, keeping your build times fast while improving your page load performance and Core Web Vitals.
Image Optimization with Astro on Vercel is supported out of the box with Astro's Image component. See the Image Optimization quickstart to learn more.
Image Optimization with Astro on Vercel:
Middleware
Edge Middleware is code that executes before a request is processed on a site, enabling you to modify the response. Because it runs before the cache, Edge Middleware is an effective way to personalize statically generated content.
Astro middleware allows you to set and share information across your endpoints and pages with a
middleware.ts
file in yoursrc
directory. The following example edits the global locals object, adding data which will be available in any.astro
file:Astro middleware is not the same as Vercel's Edge Middleware, which has to be placed at the root directory of your project, outside
src
.To add custom properties to locals in
middleware.ts
, you must declare a global namespace in yourenv.d.ts
file:You can then access the data you added to locals in any
.astro
file, like so:Deploying middleware at the Edge
You can deploy Astro's middleware at the Edge, giving you access to data in the
RequestContext
andRequest
, and enabling you to use Vercel's Edge Middleware helpers, such asgeolocation()
oripAddress()
.To use Astro's middleware at the Edge, set
edgeMiddleware: true
in yourastro.config.ts
file:If you're using Vercel's Edge Middleware, you do not need to set
edgeMiddleware: true
in yourastro.config.ts
file.See Astro's docs on the limitations and constraints for using middleware at the Edge, as well as their troubleshooting tips.
Using Astro.locals in Edge Middleware
The
Astro.locals
object exposes data to your.astro
components, allowing you to dynamically modify your content with middleware. To make changes toAstro.locals
in Astro's middleware at the edge:src/middleware.ts
and name itsrc/vercel-edge-middleware.ts
. This file name is required to make changes toAstro.locals
. If you don't want to updateAstro.locals
, this step is not required.Astro.locals
.For TypeScript, you must install the
@vercel/edge
package:Then, type your middleware function like so:
Using Vercel's Edge Middleware
Astro's middleware, which should be in
src/middleware.ts
, is distinct from Vercel Edge Middleware, which should be amiddleware.ts
file at the root of your project.Vercel recommends using framework-native solutions. You should use Astro's middleware over Vercel's Edge Middleware wherever possible.
If you still want to use Vercel's Edge Middleware, see the Quickstart to learn how.
Rewrites
Rewrites only work for static files with Astro. You must use Vercel's Edge Middleware for rewrites. You should not use
vercel.json
to rewrite URL paths with astro projects; doing so produces inconsistent behavior, and is not officially supported.Redirects
In general, Vercel recommends using framework-native solutions, and Astro has built-in support for redirects. That said, you can also do redirects with Vercel's Edge Middleware.
Redirects in your Astro config
You can do redirects on Astro with
astro.config.ts
using theredirects
config option as shown below:Redirects in Server Endpoints
You can also return a redirect from a Server Endpoint using the
redirect
utility:Redirects in components
You can redirect from within Astro components with
Astro.redirect()
:Certainly! Here is the provided documentation formatted in Markdown:
Astro removes the final file during the build process, so the name of the file should include the extension of the data you want to serve (for example,
example.png.js
will become/example.png
).Serverless Functions with Astro on Vercel:
Edge Functions
Edge Functions are a fast, scalable solution for delivering dynamic content to users. By default, Edge Functions are deployed globally and will be invoked in one of Vercel's Edge regions near your site's visitors.
Astro does not currently support Edge Functions natively, however, you can use the
/api
directory to define Edge Functions with any framework on Vercel. See the Edge Functions quickstart to get started.Edge Functions with Nuxt on Vercel:
Image Optimization
Image Optimization helps you achieve faster page loads by reducing the size of images and using modern image formats. When deploying to Vercel, images are automatically optimized on demand, keeping your build times fast while improving your page load performance and Core Web Vitals.
Image Optimization with Astro on Vercel is supported out of the box with Astro's Image component. See the Image Optimization quickstart to learn more.
Image Optimization with Astro on Vercel:
Middleware
Edge Middleware is code that executes before a request is processed on a site, enabling you to modify the response. Because it runs before the cache, Edge Middleware is an effective way to personalize statically generated content.
Astro middleware allows you to set and share information across your endpoints and pages with a
middleware.ts
file in yoursrc
directory. The following example edits the global locals object, adding data that will be available in any.astro
file:Astro middleware is not the same as Vercel's Edge Middleware, which has to be placed at the root directory of your project, outside
src
.To add custom properties to locals in
middleware.ts
, you must declare a global namespace in yourenv.d.ts
file:You can then access the data you added to locals in any
.astro
file, like so:Deploying middleware at the Edge
You can deploy Astro's middleware at the Edge, giving you access to data in the RequestContext and Request and enabling you to use Vercel's Edge Middleware helpers, such as
geolocation()
oripAddress()
.To use Astro's middleware at the Edge, set
edgeMiddleware: true
in yourastro.config.ts
file:If you're using Vercel's Edge Middleware, you do not need to set
edgeMiddleware: true
in yourastro.config.ts
file.See Astro's docs on the limitations and constraints for using middleware at the Edge, as well as their troubleshooting tips.
Using Astro.locals in Edge Middleware
The
Astro.locals
object exposes data to your.astro
components, allowing you to dynamically modify your content with middleware. To make changes toAstro.locals
in Astro's middleware at the edge:Add a new middleware file next to your
src/middleware.ts
and name itsrc/vercel-edge-middleware.ts
. This file name is required to make changes toAstro.locals
. If you don't want to updateAstro.locals
, this step is not required.Return an object with the properties you want to add to
Astro.locals
.For TypeScript, you must install the
@vercel/edge
package:Then, type your middleware function like so:
Using Vercel's Edge Middleware
Astro's middleware, which should be in
src/middleware.ts
, is distinct from Vercel Edge Middleware, which should be a `middleware.ts` file at the root of your project.
Vercel recommends using framework-native solutions. You should use Astro's middleware over Vercel's Edge Middleware wherever possible.
If you still want to use Vercel's Edge Middleware, see the Quickstart to learn how.
Rewrites
Rewrites only work for static files with Astro. You must use Vercel's Edge Middleware for rewrites. You should not use
vercel.json
to rewrite URL paths with Astro projects; doing so produces inconsistent behavior and is not officially supported.Redirects
In general, Vercel recommends using framework-native solutions, and Astro has built-in support for redirects. That said, you can also do redirects with Vercel's Edge Middleware.
Redirects in your Astro config
You can do redirects on Astro with
astro.config.ts
using theredirects
config option as shown below:Redirects in Server Endpoints
You can also return a redirect from a Server Endpoint using the redirect utility:
Redirects in components
You can redirect from within Astro components with
Astro.redirect()
:Astro Middleware on Vercel:
Caching
Vercel automatically caches static files at the Edge after the first request and stores them for up to 31 days on Vercel's Edge Network. Dynamic content can also be cached, and both dynamic and static caching behavior can be configured with Cache-Control headers.
The following Astro component will show a new time every 10 seconds. It does so by setting a 10-second max age on the contents of the page, then serving stale content while new content is being rendered on the server when that age is exceeded.
Learn more about Cache Control options
CDN Cache-Control headers
You can also control how the cache behaves on any CDNs you may be using outside of Vercel's Edge Network with CDN Cache-Control Headers.
The following example tells downstream CDNs to cache the content for 60 seconds, and Vercel's Edge Network to cache it for 3600 seconds:
Learn more about CDN Cache-Control headers
Learn more about CDN Cache-Control headers
Caching on Vercel:
Speed Insights
Vercel Speed Insights provides you with a detailed view of your website's performance metrics, facilitating informed decisions for its optimization. By enabling Speed Insights, you gain access to the Speed Insights dashboard, which offers in-depth information about scores and individual metrics without the need for code modifications or leaving the dashboard.
To enable Speed Insights with Astro, see the Speed Insights quickstart.
To summarize, using Speed Insights with Astro on Vercel:
More benefits
See our Frameworks documentation page to learn about the benefits available to all frameworks when you deploy on Vercel.
More resources
Learn more about deploying Astro projects on Vercel with the following resources:
Last updated on March 2, 2023