AstroHow-ToBeginner · 3 min read

How to Redirect in Astro: Simple Guide with Examples

In Astro, you can redirect users by returning a Response object with a Location header and a 3xx status code in server-side code. For client-side redirects, use JavaScript's window.location or Astro's client-side routing with frameworks like React or Svelte.

📐

Syntax

To redirect in Astro on the server side, return a Response with a Location header and a redirect status code (usually 301 or 302). This tells the browser to go to a new URL.

Example parts:

new Response(null, { status: 302, headers: { Location: '/new-url' } }): creates a redirect response.
status: HTTP status code for redirect (301 = permanent, 302 = temporary).
Location: the URL to redirect to.

javascript

export async function get() {
  return new Response(null, {
    status: 302,
    headers: {
      Location: '/new-url'
    }
  });
}

💻

Example

This example shows a server-side redirect in an Astro page. When the page is requested, it immediately redirects the user to /new-url.

astro

---
export async function get() {
  return new Response(null, {
    status: 302,
    headers: {
      Location: '/new-url'
    }
  });
}
---

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Redirecting...</title>
  </head>
  <body>
    <p>If you see this, redirect did not work.</p>
  </body>
</html>

Output

Browser immediately navigates to /new-url without showing this page.

⚠️

Common Pitfalls

Common mistakes when redirecting in Astro include:

Not returning the Response object from the server function, so redirect does not happen.
Using client-side JavaScript redirect without considering SEO or initial load behavior.
Forgetting to set the correct HTTP status code (use 301 for permanent, 302 for temporary).

Server-side redirect is preferred for SEO and faster navigation.

javascript

/* Wrong: Missing return, redirect won't happen */
export async function get() {
  new Response(null, {
    status: 302,
    headers: { Location: '/new-url' }
  });
}

/* Right: Return the Response to trigger redirect */
export async function get() {
  return new Response(null, {
    status: 302,
    headers: { Location: '/new-url' }
  });
}

📊

Quick Reference

Action	Code Snippet	Description
Server-side redirect	return new Response(null, { status: 302, headers: { Location: '/path' } });	Redirects immediately on server with HTTP status
Permanent redirect	return new Response(null, { status: 301, headers: { Location: '/path' } });	Permanent redirect for SEO
Client-side redirect	window.location.href = '/path';	Redirects in browser after page loads

✅

Key Takeaways

Use server-side Response with Location header for redirects in Astro.

Always return the Response object to trigger the redirect.

Use status 301 for permanent and 302 for temporary redirects.

Client-side redirects can be done with window.location but are less SEO-friendly.

Server-side redirects improve user experience and SEO by redirecting before page load.