近日体验了某项目的缓存组件,结果 обнаружил 了诸多问题。官方文档存在错误,use cache 示例在非 async 函数中不可用,导致共享组件写法需要调整。ISR等文档内容在 cacheComponent 下无法使用且未更新。middleware.ts 更名为 proxy.ts,但在 Windows 环境下构建后功能失效,后确认在 16.0.1 版本修复。cacheComponent 替换 dynamic='force-static' 后行为不一致,动态内容返回 no-store 但实际走了缓存,而 force-static 原本返回 s-maxage 和 swr。开发环境偶发性报错,生产环境正常。15版本中 SSG 页面变为 PPR,且 use cache 无法恢复。使用 next-intl 等路由 i18n 库的项目可能存在兼容性问题,建议设置 setRequestLocale 避免组件添加 Suspend 或 use cache。两天测试发现诸多问题,建议谨慎升级或暂不启用 cacheComponent。
⚠️ 官网文档存在错误,例如 use cache 在非 async 函数中实际不可用,与文档示例不符,导致共享组件的写法需要调整。
🐞 middleware.ts 更名为 proxy.ts 后,在 Windows 环境下构建会导致该文件功能失效,影响代理相关功能,此问题已在 16.0.1 版本中得到修复。
🔄 使用 cacheComponent 替换 dynamic='force-static' 后,两者在缓存行为上存在差异;前者动态内容返回 cache-control:no-store 但实际走了缓存,而后者原本会返回 s-maxage 和 swr,影响缓存策略。
🤔 在开发环境下,某些情况下使用 'use cache' 会导致应用崩溃报错,但相同的代码在生产环境下却能正常运行,开发与生产环境行为不一致。
🌐 对于使用了 next-intl 等基于路由的国际化 (i18n) 库的项目,可能尚未完全兼容新的缓存组件,建议在使用前设置 setRequestLocale,以避免因读取 cookie 导致所有组件都需要添加 Suspend 或 use cache。
这几天对那个 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