Next.js中unstable_cache不缓存的原因排查求助

你的代码逻辑本身没有问题，但每次刷新都生成新随机数的原因主要有以下几点：

1. 开发模式默认禁用缓存 #

Next.js 在 next dev 开发环境下，为了保证代码修改能实时反馈，会自动禁用大部分服务器端缓存机制，包括 unstable_cache。这意味着即使你配置了缓存参数，开发时每次请求都会重新执行被缓存的函数。

2. 组件可能被识别为客户端组件 #

unstable_cache 是服务器端专属 API，只能在服务器组件、Route Handler 或 Server Action 中使用。如果你的组件满足以下任一条件，会被转为客户端组件，导致缓存失效：

• 组件中使用了客户端专属钩子（如 useState、useEffect）或浏览器 API
• 组件顶部添加了 'use client' 指令
• 被其他客户端组件直接或间接导入

解决方法 #

• 验证生产环境：运行 next build && next start 启动生产服务，此时缓存会正常生效，刷新页面不会再生成新的随机数。
• 确保组件是纯服务器组件：移除组件中所有客户端相关代码，不要添加 'use client' 指令，保证组件在服务器端执行。
• 避免在客户端调用缓存函数：不要在客户端事件（如点击事件）中调用 getRandomNumber，这类操作会在客户端执行，绕过服务器缓存。

如果上述方法都无法解决，可以尝试显式指定更独特的缓存键（比如 ['random_number', 'v1']），或者检查 next.config.js 中是否有覆盖缓存的配置。

内容的提问来源于stack exchange，提问作者VdfX89