nextjs 16 正式版果然还只是个类似 beta 啊 要用的建议等到 16.1 或者 16.2 再碰

[bbbblue]

这几天对那个 cache component 感兴趣，就找了个之前的项目试了一下。

结果像捅了 bug 窝子一样。

1. 首先是官网文档上一堆错误，他们的 use cache 例子给了非 async 函数可用，但是实际不可用，所以之前那种 shared component 的写法都得改（不写 use client ，但是用 hook 的方式）。ISR 等文档内容在 cacheComponent 无法使用，还没更新。

2. middleware.ts 改名成了 proxy.ts, 但是没测试 windows ，导致 build 之后，windows 下整个 proxy.ts 功能消失（换成 middleware.ts 又可用了）。 确认 16.0.1 修复

3. 用文档的 cacheComponent 取代 dynamic='force-static'后发现两者行为不一致，用那个写法的动态内容全返回了 cache-control:no-store,打 debug 日志是走了缓存。原先 force-static 会返回 s-maxage 和 swr

4. 一直改代码 build ，观察生产环境的缓存情况，结果发现跑 dev 报错... ...某些情况写"use cache"，dev 就会挂掉，但是生产没问题。😂

5. 15 时候是 SSG 的 page 全变成了 PPR ，并且加 use cache 也变不回 SSG 。

如果你项目里用了 next-intl 之类 route base 的 i18n,他们可能还没兼容好。next-intl 最好拿到 locale 都设置一下 setRequestLocale,不然它会去读 cookie ，导致所有的组件都要加 Suspend 或者 use cache 。

这是我就试了 2 天发现的... 这特么...

大家打算升级的缓一缓啊。。。或者不要开 cacheComponent

next-intl那个说错了 不是读cookie 是读header

headers().get('x-next-intl-locale')

[XTTX]

哎 与其跟着一个卖 aws wrapper 的公司胡乱搞, 不如直接换 tanstack start 。react 还加了个'use no memo'.. 我也是服了这群人。

[bbbblue]

@XTTX 我是直接 docker 部署的 前面一个 cf 所以这个 cache-control 对我挺重要 😂
（ emmm 不过我 cf 里那个 path 写个规则让他全部强制 cache 了 这么一想似乎也没那么重要了...

[avenger]

哈哈，这两天同样也在迁移中，坑踩得差不多了，换了 cacheComponent 后响应速度确实快了很多

[bbbblue]

@avenger 嗯 之前 Suspense 和缓存不强制 写的不好 server component 获取数据能卡着整个页面加载 现在强制了 页面静态部分能一下子出来
还有就是 dev 感觉也快了好多 之前 compile 要好几秒 😂

[avenger]

@bbbblue 这其实是一个好事 - 暴露了很多代码中隐藏的设计问题

[bbbblue]

@avenger 是啊 这方面是得强制 强制你实施他的最佳实践了
不过这东西现在在 dev/build 的时候才知道。。。稍微有一点点蛋疼了

[avenger]

@bbbblue 最深的坑是 loading.tsx ，之前根布局没有也不会报错，查了几个小时，才发现是这个问题，必须要 Suspense 才行，页面默认没有静态渲染了 😂

[avenger]

@bbbblue 还有个坑，Claude Code 还不知道 16 的新特性，经常把 15 的功能又加回去

[bbbblue]

@avenger 嗯 或者你在根布局里再加个<Suspense>{children}</Suspense> 或者你的 children 都用了 use cache
主要是得跑起来才知道 有点蛋疼
还有另一个蛋疼得 你用一些三方组件的 UI 他们如果读 cookie/header 了 你就得 wrap 一层。。。不然直接用有些情况也会报错😂

[avenger]

@bbbblue 我已经更新完发布第一个版本了，哈哈，用户反馈速度比之前快了 5-10 倍

[avenger]

@bbbblue 第三方依赖比较多是比较痛苦，build 一次要好久

[avenger]

再分享一个：
跨 layout 的 ui 组件，像 shadcn/ui 的 Drawer 、Sidebar 、Sheet 这些会 Portal 到 Root 的，由于 cacheComponents layout 缓存了，导致组件打开状态会继续保持，之前跨 layout 会自动清理，现在需要手动管理

[AlexJesus]

@avenger #12 感谢分享

[avenger]

@avenger 再补充一下

如果不想手动管理的话，就需要 Custom portal container 到当前的 layout 而不是 root layout
本质上是因为 Next.js 16 引入了 React 19.2 的新特性 Activity 导致的，目前这个还需要等官方解决

```
Activity: Render "background activity" by hiding UI with display: none while maintaining state and cleaning up Effects
```

这里有我发的一个详细的案例和相关讨论：

https://github.com/vercel/next.js/discussions/85502