Published on

Getting Started with Vercel Edge Config: A Step-by-Step Guide

Authors

I've recently came to know about Vercel's Edge Config when I was trying to learn the architecture behind the Dub.sh

It was used in handling config for blacklisting certain domains or email addresses

What is Vercel's Edge Config?

Edge Config allows you to maintain config and access it anywhere in the world almost instantly (reads are under 15 ms)

Can't I just use Environmental Variables? Yeah, You can.

But with Edge Config allows you to make changes to your app's configuration without needing to redeploy or restart your app. Any updates made to the Edge Config store will be immediately available to your app."

What are some use cases for it?

Vercel Edge Config can be used for a variety of purposes, including:

  • Implementing feature flags
  • Conducting A/B testing
  • Blacklisting certain users or domains or IP addresses
  • Managing dynamic redirections

Are there any drawbacks to using Vercel Edge Config?

As with anything in software engineering, Vercel Edge Config has certain limitations to consider. Here are a few:

  • The number and size of Edge Config stores are limited. For example, on the Hobby plan, you can only create one store with a maximum size of 8 KB.
  • Writing to the Edge Config store can be resource-intensive and may take up to 10 seconds to update changes globally.

You can read more about it in their docs

How to Read or Write Edge Config?

We'll need to create Edge Config Store using Vercel Dashboard.

We'll need to have to set EDGE_CONFIG environmental variable in our project to use Vercel Edge Config.

You can do that automatically by connecting your store with your project or you can even create a read only token and set it in the project yourself.

Writing/Updating the config store using the Vercel Dashboard

Using the dashboard, we can edit the data.

In my case, I've a feature x that I'll be disabling / enabling on demand.

Whenever we make the change in config store. It's digest is changed as well which is used in SDK to differentiate old and new data.

Retrieving the config store using the Vercel SDK

Make sure EDGE_CONFIG is set in env variable.

import { get, getAll } from '@vercel/edge-config';


export async function getServerSideProps(context) {
// Get particular key value
const isFeatureXEnabled = await get('enable_feature_x');
// Get everything in the store
const edgeStoreConfig = await getAll();
  return {
    // will be passed to the page component as props
    props: { isFeatureXEnabled }, 
  }
}

Happy instant config!

Reference