这几天对那个 cache component 感兴趣，就找了个之前的项目试了一下。
结果像捅了 bug 窝子一样。
-
首先是官网文档上一堆错误，他们的 use cache 例子给了非 async 函数可用，但是实际不可用，所以之前那种 shared component 的写法都得改（不写 use client ，但是用 hook 的方式）。ISR 等文档内容在 cacheComponent 无法使用，还没更新。
-
middleware.ts 改名成了 proxy.ts, 但是没测试 windows ，导致 build 之后，windows 下整个 proxy.ts 功能消失（换成 middleware.ts 又可用了）。 确认 16.0.1 修复
-
用文档的 cacheComponent 取代 dynamic='force-static'后发现两者行为不一致，用那个写法的动态内容全返回了 cache-control:no-store,打 debug 日志是走了缓存。原先 force-static 会返回 s-maxage 和 swr
-
一直改代码 build ，观察生产环境的缓存情况，结果发现跑 dev 报错... ...某些情况写"use cache"，dev 就会挂掉，但是生产没问题。😂
-
15 时候是 SSG 的 page 全变成了 PPR ，并且加 use cache 也变不回 SSG 。
如果你项目里用了 next-intl 之类 route base 的 i18n,他们可能还没兼容好。next-intl 最好拿到 locale 都设置一下 setRequestLocale,不然它会去读 cookie ，导致所有的组件都要加 Suspend 或者 use cache 。
这是我就试了 2 天发现的... 这特么...
大家打算升级的缓一缓啊。。。或者不要开 cacheComponent
12 条回复 • 2025-10-31 19:05:31 +08:00
 |
1
XTTX 1 天前
哎 与其跟着一个卖 aws wrapper 的公司胡乱搞, 不如直接换 tanstack start 。react 还加了个'use no memo'.. 我也是服了这群人。
|
 |
2
bbbblue OP @XTTX 我是直接 docker 部署的 前面一个 cf 所以这个 cache-control 对我挺重要 😂
（ emmm 不过我 cf 里那个 path 写个规则让他全部强制 cache 了 这么一想似乎也没那么重要了... |
 |
3
avenger 19 小时 47 分钟前 via iPhone
哈哈，这两天同样也在迁移中，坑踩得差不多了，换了 cacheComponent 后响应速度确实快了很多
|
|
4
bbbblue OP @avenger 嗯 之前 Suspense 和缓存不强制 写的不好 server component 获取数据能卡着整个页面加载 现在强制了 页面静态部分能一下子出来
还有就是 dev 感觉也快了好多 之前 compile 要好几秒 😂 |
|
7
avenger 11 小时 30 分钟前
@bbbblue 最深的坑是 loading.tsx ，之前根布局没有也不会报错，查了几个小时，才发现是这个问题，必须要 Suspense 才行，页面默认没有静态渲染了 😂
|
|
9
bbbblue OP @avenger 嗯 或者你在根布局里再加个<Suspense>{children}</Suspense> 或者你的 children 都用了 use cache
主要是得跑起来才知道 有点蛋疼 还有另一个蛋疼得 你用一些三方组件的 UI 他们如果读 cookie/header 了 你就得 wrap 一层。。。不然直接用有些情况也会报错😂 |
|
12
avenger 9 小时 57 分钟前
再分享一个：
跨 layout 的 ui 组件，像 shadcn/ui 的 Drawer 、Sidebar 、Sheet 这些会 Portal 到 Root 的，由于 cacheComponents layout 缓存了，导致组件打开状态会继续保持，之前跨 layout 会自动清理，现在需要手动管理 |
Select Language