How to use Redis with Vercel Edge

Introduction

Vercel’s Edge Network provides developers with powerful compute capabilities with zero configuration and added latency.

Edge Functions are JavaScript, TypeScript, or WebAssembly functions that are designed to be more efficient and faster than traditional Serverless compute and they are generally available since December 2022.

Redis client for the Edge
Under the hood Vercel Edge uses Cloudflare Workers and the Workers cannot create TCP connections.

Due to this runtime restrictions of Vercel Edge, custom clients are needed to use certain services like Redis.

To overcome this issue we will need to use a Redis http client and a provider that support this funcionality.
Luckily for us Upstash provides both things for us!

If you haven’t already create your Next.js app with: “npx create-next-app@latest — typescript”

npm install @upstash/redis

Create Redis instance
Once installed, you can create a Redis instance with Upstash and obtain the connection URL. This connection URL can then be used in your Vercel Edge Functions to access the Redis instance.

Remember to copy the secrets from Upstash dashboard:

UPSTASH_REDIS_REST_URL
UPSTASH_REDIS_REST_TOKEN

Copy these to your .env and upload them on Vercel as secrets.

Create the Edge Function
https://gist.github.com/gofixgo/67f17cbac15634ea44b950d8a73a820e

import { NextRequest, NextResponse } from "next/server";
import { Redis } from "@upstash/redis";
export const config = {
  runtime: "edge",
};

if (
  !process.env.UPSTASH_REDIS_REST_URL ||
  !process.env.UPSTASH_REDIS_REST_TOKEN
) {
  throw new Error("Missing UPSTASH_REDIS_REST_URL or UPSTASH_REDIS_REST_TOKEN");
}

// Create a Redis client outside of the function
const redis = new Redis({
  url: process.env.UPSTASH_REDIS_REST_URL,
  token: process.env.UPSTASH_REDIS_REST_TOKEN,
});

export async function middleware(req: NextRequest) {
  const country = req.geo?.country || "fallback";

  // Increment the country counter
  const sameCountryVisits = await redis.incr(country);
  // Increment the total counter
  const totalVisits = await redis.incr("total");


  return NextResponse.json({
    sameCountryVisits,
    totalVisits,
  });
}

Alternatives to Upstash for Edge Functions?
As we mentioned before Edge Functions runs on a runtime where common Redis clients won’t work due to V8 engine restrictions on TCP connections.

This means that you can’t use self hosted Redis or Redislabs unless you use and implement a REST Proxy. Upstash Redis has this REST API built-in by default.

Best Practices for Using Redis with Vercel Edge:
To ensure that Redis performs optimally with Vercel Edge, it is important to follow some best practices.

These include keeping Redis keys and values small to reduce memory usage, setting expiration times on cached data to prevent stale data, and monitoring Redis performance to ensure it can handle the workload.

Additionally, Redis can be used in combination with Vercel Edge cache using: https://github.com/vercel/examples/tree/main/edge-api-routes/cache-control

Conclusion
Using Upstash Redis with Vercel Edge can provide a significant performance boost for your applications. So why not give Redis a try with Vercel Edge and see how it can benefit your application?

Upstash Rest API docs: https://docs.upstash.com/redis/features/restapi

Happy coding!