记一个next升级遇到的偶现问题

什么是 RSC

RSC 即 React Server Component（服务端组件），是 Next App Router 核心渲染模式：

1. 组件分两类：无use client为服务端组件（跑后端，不输出 JS）；加use client为客户端组件（浏览器交互）。
2. 页面内无刷新跳转时，不会拉取完整 HTML，而是发起独立 RSC 接口拉取组件数据。
3. RSC 请求标识：url 带?__rsc=1、请求头携带RSC:1，返回自定义流式数据，非标准 HTML/JSON。

前景：

next page router升级至 App Router 架构，页面偶现白屏，特别是Link 预请求的场景。
根因：CDN 缓存了 RSC 专属数据请求，新旧版本 RSC 数据流不兼容，客户端注水失败。
解决方案：CDN 添加规则，拦截 RSC 请求、禁止缓存、强制回源。

缓存致白屏原理

1. RSC 承载动态用户数据、路由组件信息，不能静态缓存；
2. CDN 缓存旧 RSC 载荷后，新页面 HTML 与缓存数据格式不匹配，触发 hydration 渲染异常，页面空白；
3. 跨大版本升级后，Next1x 与 16 的 RSC 数据流格式改动，缓存旧数据完全无法解析，故障大幅加重。

CDN 处理方案

匹配条件（满足其一即不缓存）：

1. 查询参数含__rsc
2. 请求头存在RSC
   执行规则：关闭缓存、强制回源，不存储节点缓存。

tips

为什么会cdn前端页面是因为要配套设计一套ddos攻击的防御机制，后续有空分享….