astro-static-headers
v1.0.1
Published
Astro integration that captures headers and redirects during prerender and writes platform-specific config (Netlify, Cloudflare, Vercel).
Maintainers
abemediaReadme
astro-static-headers 📡
An Astro integration that captures headers and redirects from statically-generated routes during the build and generates the appropriate configuration files for your deployment platform.
Why Astro Static Headers?
Astro generates fully static sites by default, but it doesn’t include a built-in way to define custom HTTP headers or network-level redirects for your pages. This makes it challenging to add things like caching rules, security headers, or server-side redirects without manually editing configuration files for your hosting platform.
With Astro Static Headers, you can define headers and redirects in your pages using
Astro.response.headers.set
and Astro.redirect, just as as
you would in server output mode. During the build, the plugin automatically captures these and
generates the appropriate configuration for your adapter (currently supports @astrojs/netlify,
@astrojs/cloudflare, and @astrojs/vercel).
This keeps your headers and redirects in your code, ensuring consistent builds, faster network-level redirects, and improved performance and SEO - all without the need for platform-specific configuration.
Installation
npx astro add astro-static-headersManual Install
Install the astro-static-headers using your package manager.
npm install astro-static-headersAdd the integration to your astro.config.mjs:
import { defineConfig } from 'astro/config';
import staticHeaders from 'astro-static-headers';
export default defineConfig({
// ...
integrations: [staticHeaders()],
});Usage
astro-static-headers automatically detects headers and redirects for statically-generated routes
during the build process. Simply set them the same way you would for on-demand rendered routes.
Setting Headers for Static Astro Pages
Use Astro.response.headers.set() in your pages to add custom headers:
---
Astro.response.headers.set('Cache-Control', 'public, max-age=3600');
---
<html>
<!-- Page here... -->
</html>Setting Headers for Static Astro Endpoints
Return a headers object in your endpoints to add custom headers:
export async function GET() {
return new Response(`{ "message": "Hello, World!" }`, {
headers: {
'Content-Type': 'application/json',
},
});
}Creating Redirects for Astro Static Pages
Use Astro.redirect() in your pages to create redirects:
---
return Astro.redirect('/new-location', 301);
---Creating Redirects for Astro Static Endpoints
Use context.redirect() in your endpoints to create redirects:
export async function GET({ redirect }) {
return redirect('/new-location', 302);
}