A Very JAMstacky URL Shortener / Redirector

Just a fun side project I built a few weeks ago. Taking inspiration from Phil Hawksworth in a number of ways (most notably the design pattern of falling back to a serverless function before the static build is finished), thats.at is a redirect engine that has no runtime, no servers, no cost to run, and provides extremely high performance with geographically distributed shortened-redirections.

Alright, enough with the fancy words - it’s not too complex. When you add a new redirection, a serverless function uses my GitHub personal access token to add a new line to the _redirects file inside the repository with a random key value for the ‘from’ URL (the ‘short’ bit). That in turn kicks off a new Netlify build and that build completes in less than 30 seconds. Voilà! That redirect is now live and geographically distributed. Since Netlify Edge pushes all sites’ redirects out to every node across the globe, redirects from thats.at are actually faster to resolve than more traditional redirectors. Yay!

But what about the 30 seconds between when a new redirect is added to the _redirects file and when the build completes and those new redirects are shipped out to the Edge? Great question. This is where the premise of ‘falling back to a serverless function’ comes into play. When a request to the shortened URL comes in during that time, the data of where the user should be redirected to is available, it’s just not quite done baking yet. So we use a serverless function to grab the data where it’s available! GitHub! Using a touch of magic thanks to Netlify’s redirects incorporating shadowing, any shortened URL that’s not fully baked and live yet will fall back to a serverless function that reaches out to GitHub, reads the _redirects file, and sends the user back with a 302 to the correct location. Once the site is done building, Netlify’s redirects will take over and there’ll be no fallback to a serverless function. Yay!

Feel free to fork and try out for yourself! 😁


(GitHub Source)

Header Photo / Banner by: @juneadmiraal

Join the Conversation

Latest Blog Posts