How do you handle cookies, sessions, and caching in a React Edge Runtime environment?

Short answer

Read cookies in edge handlers, configure Cache-Control headers precisely, and use Middleware to prevent one user's data from leaking into cached responses for others.

Explanation

Edge environments run on distributed servers near users (such as Cloudflare Workers). Because they are lightweight and share global caches, avoid caching personal data in CDN responses (such as with s-maxage). Keep shared public caching separate from private session data with a Vary: Cookie header.

Code example

// Check cookies at the edge
export function middleware(request: Request) {
  const token = request.headers.get('cookie')?.includes('session_token');
  if (!token) {
    return Response.redirect(new URL('/login', request.url));
  }
}

Common mistakes

• Caching responses with one user's personal information on a shared CDN for other users.

Follow-up questions

• What are React Server Components (RSC), and how do they fundamentally differ from SSR?

Sources

• Next.js docs — cookies