If you visited our homepage recently and are in the United States, you might have noticed that we added a small dismissible US Election banner at the top of the page to encourage Americans to make their voice heard and go vote in the upcoming election.
One of our goals was to keep that banner relevant for US visitors only and we were able to easily achieve that with our own redirects and rewrites engine.
Preparing the site
Since we use a combination of Eleventy and Vue, we were able to quickly spin up a custom US version of our homepage using Vue’s components and props, but any stack will work as the requirements are only two different HTML files. Our code looks a bit like this:
index.vue
<template>
<home></home>
</template>
index-us.vue
<template>
<home country=“us”></home>
</template>
components/home.vue
<template>
<div>
<header />
<div v-if=“country === ‘us’”>
<election-banner />
</div>
…
</div>
</template>
This will output an index-us.html with our Election banner while keeping our original index.html unchanged.
Country-based redirects
With Netlify Redirects, we can show site visitors different content based on their location by adding a Country condition to our _redirects file:
/ /index-us.html 200! Country=us
Now, whenever someone visits Netlify and is located in the United States, they will get served the content from index-us.html instead of the regular index.html. We assign a 200 status code to keep the visitor’s URL the same, while Netlify’s servers fetch the new page behind the scenes.
If you have more complex use cases, there are great examples in the docs on how to handle whole domain redirect or redirect by language instead of country.
A word on web performance
Unlike a typical client-side JavaScript solution, redirecting at the edge opens up tons of localization customization while keeping our page performance and web vitals intact, especially reducing our Cumulative Layout Shift (CLS), resulting in a better user experience.
In the future, we want to keep showing more pertinent information to our visitors. Customer’s case studies or quotes based on our visitor’s location or language are a couple examples that become a breeze to put in place with our redirects and rewrites.
