An idiomatic way to pass data from server to server components

[dominictobias-bullish]

Goals

1. To not bloat HTTP headers. Using cookies or search params (which is not idiomatic since it doesn't actually change the URL which is weird AF) can easily reach 431 max header size catastrophe in conjunction with ad heavy websites
2. To provide a way to easily access state between server rendered code e.g. middleware, generateMetadata, and getServerSideProps without bloating HTTP header or abusing URLs

Non-Goals

Background

Passing state with headers or cookies should be unnecessary for code which is executing in a single pass on the server. It's too easy to hit max header size when combining ads and passing state via http headers

Proposal

import cache from 'next/servercache'

// middeware.ts
cache.set('someKey', 'someValue')

// getServerSideProps or generateMetadata
cache.get('someKey') // 'someValue'

[Yasir-Rafique]

Great question and solid proposal! I completely agree that bloating HTTP headers or using cookies/search params just to pass transient server state feels awkward especially with ad-heavy pages where header size limits are a real risk.

Your idea of a next/servercache API where you could just set and get values between middleware, generateMetadata, and getServerSideProps would make working with server-rendered state much cleaner and safer. It is logical since all of this code is running during a single server pass, so there is no need to serialize state across network boundaries.

Right now, though, there is no built-in API like next/servercache in Next.js. Currently, the usual ways to share state are:

• Passing info through headers/cookies (which, as you mentioned, can hit limits and is messy).
• Encoding state into the URL (which is hacky and exposes internals).
• Relying on shared context via in-memory solutions but this doesn’t scale reliably in serverless/server environments (like Vercel) since each request could hit a different instance.

Bottom line:

Your idea would solve a real pain point! Right now, it isn’t possible out-of-the-box in Next.js or Vercel mainly due to how serverless works (no guarantee of hitting the same server “cache” in different parts of the stack).

The best workaround is minimizing the data you pass and, where possible, fetching required state again in each part (middleware, page, etc.) even though it isn’t ideal.