Fight Link Rot with Server- and Client-side Redirects (Netlify and Gatsby)
Links break. Here’s how to fight link rot on your site with redirects.
URL architectures change all the time as the needs of a site grows. What starts out as
/my-post can become
news/2019/my-post in future.
Consider the user experience. Imagine you’re doing some deep research and after hours of scrounging through the back pages of your Google results, you find a link to something which could solve all your problems. You click it, and the site is still up, but all you see is a 404 page! If the content is still up, hopefully the site has a search function to find it, or Google indexes it. A minor annoyance, sure, but one you as a responsible webmaster could avoid for your users.
The principle of “Don’t Break the Web” becomes even more pressing considering automated workflows like social media unfurls and Email/RSS/site scrapers will simply break.
At the most basic form, you will want to redirect from URL A to URL B:
/my-broken-url -> /posts/my-new-url
One-to-one redirection is very customizable, however may fail to scale for large groups of posts that you may need to redirect.
Netlify offers more powerful redirect configuration with Netlify Redirects. You can use placeholders to declaratively rearrange URLs. You can proxy serverless functions. You can use cookie-based language redirects. My favorite, partly because it is fun to say, is the splat feature:
Which is kind of like the spread operator of URLs.
Search engine indexes will update accordingly as your redirects get visited.
However, in the age of modern Single Page Apps, this isn’t the full story.
Server-side redirects take care of inter-site linking: the case of other sites navigating into your site on a broken link.
The first and simplest case is that a basic Single Page App, like one set up by
One drawback of this approach is that the process of resolving the page upon a full page refresh is rather roundabout. First you hit
/my-old-url, which the server then serves the client bundle for
/, which then parses and renders on the clientside, which then reads
/my-old-url, which then redirects to
It is extraordinarily easy to set up client-side redirects with Gatsby, as
createRedirect is a first-class API. This is made easier by several plugins like gatsby-plugin-client-side-redirect or gatsby-redirect-from which all make the redirects slightly easier to write. There are even hacky redirect plugins using meta tags and for serving Gatsby on an Express server.
Ostensibly, the solution here is to set up parallel server-side and client-side redirects. You may wish to autogenerate the .htaccess file if you are using an Apache server, or use Netlify Redirects to set up a parallel implementation of redirects.
You might even write a tool to output these redirects automatically… 🤔