Next.js服务端组件修改Express后端后停止请求的解决方法

问题根源 #

你遇到的是Next.js App Router服务端组件的默认缓存机制导致的问题：Next.js 13+对服务端组件内的fetch请求默认启用强制缓存（cache: 'force-cache'），第一次请求的响应会被持久化缓存，后续相同路径的请求直接读取缓存结果，不会再向Express后端发起新请求。当你修改后端代码后，前端依然复用旧缓存，甚至可能因某次异常请求缓存了空对象，导致后端无日志输出，必须删除.next文件夹清除缓存才能恢复。

解决方案 #

1. 单独禁用该请求的缓存 #

在fetch配置中添加cache: 'no-store'，强制每次请求都向后端发送：

export default async function UserProfile({params}:{params:{username:string}}){
    const data = await fetch(`http://127.0.0.1:3000/userprofile/${params.username}`,{
        headers:{'Content-Type':'application/json','Accept':'application/json'},
        cache: 'no-store' // 关键配置：禁用当前请求的缓存
    })
    const userInfo = await data.json()
    console.log(userInfo)

    // ... 页面渲染代码
}

2. 为组件设置全局无缓存策略 #

如果整个用户 profile 页面需要实时数据，可以在组件顶部添加revalidate配置，设置为0表示每次请求都重新生成组件：

export const revalidate = 0; // 全局禁用该组件的缓存

export default async function UserProfile({params}:{params:{username:string}}){
    // ... 组件代码
}

3. 开发环境全局优化（可选） #

在next.config.js中配置特定路径的缓存规则，避免开发中频繁手动清除.next文件夹：

/** @type {import('next').NextConfig} */
const nextConfig = {
  async headers() {
    return [
      {
        source: '/userprofile/:path*',
        headers: [
          {
            key: 'Cache-Control',
            value: 'no-store, max-age=0',
          },
        ],
      },
    ];
  },
};

module.exports = nextConfig;

额外修复建议 #

• 修正后端代码笔误：你的userModel中使用了Node.js不存在的全局print('again and again')，应改为console.log('again and again')，这个错误可能导致后端返回异常，进而被Next.js缓存空对象。
• 统一请求路径格式：Express路由是/userprofile/:username，但fetch中写的是/${params.username}/（末尾多了斜杠），虽然Express默认忽略末尾斜杠，但建议保持路径一致，避免潜在匹配问题。

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