Streaming React Server Components Through a CDN: The Caching Story Nobody Tells You
RSC payloads are not HTML and they are not JSON. They are something stranger — and your CDN almost certainly handles them wrong by default.
React Server Component payloads are a wire format that streams progressively. Your CDN was designed for static documents. This is the impedance mismatch nobody warned you about.
The fix is twofold: signal `Content-Type: text/x-component` and ensure your CDN does not buffer the response. On Cloudflare, this means setting cache rules to bypass on this content type. On CloudFront, it means a custom origin policy.
Production deployment
We deployed this gradually behind an internal feature flag, mirroring 1% of traffic for 72 hours before promoting. The instrumentation surface is shipped as part of our open-source edge-trace crate.
// Pseudocode — the actual wiring lives in the repo
const router = createRouter({
classify: classifier.predict,
speculate: speculator.draft,
verify: verifier.confirm,
windowSize: 8,
});
export default router.handle;What we got wrong
Our first iteration over-trusted the speculator on long sequences. The fix was a sliding acceptance threshold that decays with prefix length — obvious in hindsight, not obvious during the on-call that surfaced it.
The bottleneck is rarely where you think it is. Measure first; optimize the thing that actually moves the bill.