最近在用 Next.js 的 RSC(React Server Component)时遇到了一个比较隐晦的问题,记录一下踩坑过程和应对方案。
如果你在项目里既使用了 CDN(并且缓存了 html),又使用了middleware
的重定向(middleware 会处理 rsc 请求),又用了 RSC 特性(开启了 prefetch 等情况),如果你发现部分页面 html 变成了一大串“乱码”(其实是 rsc 请求的返回结果),可以仔细看看。
RSC 请求是怎么工作的?
Next.js 在请求 RSC 和 HTML 页面时,路径和方法其实是一样的,唯一的区别在于它会带上一个 _rsc
的参数和一些特定 header。
比如你访问页面 /about
:
- HTML 请求:
GET /about
- RSC 请求:
GET /about?_rsc=<随机字符串>
以及特定的 header
这里的 _rsc
参数是 Next.js 内部用来标识“这是一次 RSC 请求”,header 里也有类似 Next-Router-State-Tree
, rsc
等用于数据请求和分割的内容。