Redirects for static builds

[sindresorhus]

It would be useful if Astro could support redirects for static builds (non-SSR).

I generate a static build for my website and host it on GitHub Pages. Sometimes I want to rename a route or refactor how I organize pages. I cannot just rename a page as there may be links pointing to it.

It would be useful if I could declare redirects in the Astro config:

{
  '/foo/bar': '/unicorn/rainbow'
}

Astro would then use this trick to generate the boilerplate redirect files as needed.

Note that it's important that the boilerplate also contains some JS to properly forward query parameters and URL fragment.

This is possible with Jekyll: https://github.com/jekyll/jekyll-redirect-from

[delucis]

Interesting idea! We use this technique on the Astro docs site just by having some pages that only contain the appropriate <meta> tags.

I think this could also be a good candidate for an integration. Integrations can access an injectRoute hook, so it should be totally possible to use a redirects config object like you sketch out. Usage might look something like:

export default defineConfig({
  integrations: [
    redirect({
      '/foo/bar': '/unicorn/rainbow',
    }),
  ],
});

[jasikpark]

so maybe it would work like:

• take the config object of paths to paths, with possible "forward parameters" and "override existing paths" options
• run injectRoute with the meta tag and required redirect js for each matching route that exists?
  • does this work for * paths in SSG builds like netlify redirects? probably not
• use https://docs.astro.build/en/reference/integrations-reference/ for buildin'

really just restating what delucis already said in my own words so I understand it better xD

[delucis]

Yeah no way to have wildcard redirects without host-level support unless you go the route of hijacking a custom 404 page with some JavaScript to do the redirect. That'd probably require developers to drop a <Redirect /> component in their 404.astro. (Eventually maybe integrations could injectScript only on /404, but currently that hook injects everywhere.)

Also worth noting an injected route should be able to tell if the site is static or SSR and use Astro.redirect in SSR, falling back to the <meta> tag for static builds.

[natemoo-re]

This is a really great idea! Curious if there's community interest in building an astro-redirect package as a proof of concept.

[jasikpark]

another usecase for a redirect builder like this would be to make implementing https://www.defined.net/blog/internationalizing-docs-pages-with-astro/ easier!

[jasikpark]

which ig is just what the above post is about how it's used in astro docs 🤦

[matthewp]

I think this is a good idea. My only question would be whether this should be done as an integration or built-in some how. Do any other frameworks have this sort of feature? Next.js, Gatsby, Eleventy, etc?

[bluwy]

I think this should be an integration first. Some experimentation might be needed for cases like redirect wildcards, which might need the "404.html client-side redirect hack" . If the SSG deploy target supports _redirects file (and in turn support wildcard redirects), the user could toggle a mode to respect _redirects instead. If they're using Vercel for example, supporting it's redirects config would be nice too.

If we go that length, making it built-in might not be feasible too.

[delucis]

I guess the one advantage of having it be built-in would be that in the future adapters could provide custom platform support for how redirects are handled. For example, netlify() with output: 'static' could receive a redirects config from Astro and know how to map that to a _redirects file.

But that’s quite different from how we use adapters today so I’d be +1 for an integration that tackles the basics first.

[matthewp]

That's a pretty compelling use-case though. I think people would expect that Netlify / etc. pick up these redirects.

[natemoo-re]

This proposal has been advanced to Stage 2 of our RFC process.