Nextjs 14，接口数据变化未触发 server component 视图更新，原因排查

具体问题

• server component comA，依赖接口 reqA 的数据。当 reqA 中数据变化后，刷新浏览器，comA 渲染及数据并未跟随变化。

排查流程

1. server component 数据获取是通过 page/api/request.ts 作为接口数据源进行获取

2. 修改接口内逻辑，刷新页面后，页面内容没有变化

3. 关闭浏览器缓存后，更新正常

4. 将组件修改为 client component 可以正常热更新

5. 说明接口数据变化，未触发浏览器缓存内容更新

问题原因

• 远程数据更新无法触发 dev server 更新

解决方法

• 不再将接口逻辑与组件区分为两套

  • 也就是不再使用 http 请求等远程数据获取方案，远程数据更新获取无法触发对应组件内容自动更新

• 使用 client component

  • 将数据获取逻辑放在客户端触发，通过单独控制接口的缓存逻辑，来处理数据更新不展示的问题