React.js 刷新页面仍加载 Express 服务器旧数据而非更新内容，如何解决？

1. 优先确认后端服务是否生效 #

• 修改Express代码后必须重启服务才能生效：Node.js 默认不会热重载后端代码，如果你是直接用node 入口文件.js启动的服务，关闭原有进程后重新启动即可。
• 直接验证后端接口返回：在浏览器地址栏直接访问后端对应的/users接口（例如后端跑在3001端口就访问http://localhost:3001/users），查看返回的JSON是否为修改后的bye、hi内容。
  • 如果返回还是旧内容：排查是否有多个Express实例同时运行，占用同一个端口的旧实例未关闭，请求被路由到了旧服务上，关闭所有Node进程后重启即可。
  • 如果返回是新内容：问题出在前端侧，继续往下排查。

2. 排查前端缓存/请求问题 #

• 强制刷新页面跳过浏览器缓存：按下Ctrl+Shift+R（Mac为Cmd+Shift+R）强制刷新，跳过浏览器本地的HTTP缓存加载最新内容。
• 开发者工具验证请求：按下F12打开浏览器开发者工具，切换到「网络」面板，刷新页面找到/users对应的请求：
  • 查看「响应」标签的内容：如果响应是旧内容，说明存在代理缓存/CDN缓存，可在Express接口中添加禁用缓存的响应头：

    router.get('/', function(req, res, next) {
      // 添加禁用缓存响应头
      res.setHeader('Cache-Control', 'no-store, no-cache, must-revalidate, proxy-revalidate');
      res.json([{
        id: 1,
        username: "bye"
      }, {
        id: 2,
        username: "hi"
      }]);
    });
    

  • 如果响应是新内容但页面没更新：切换到「控制台」标签查看是否有JS报错，确认fetch请求没有抛出跨域/网络异常导致setState未执行。

3. 开发环境优化建议 #

后端开发阶段可以用nodemon工具实现代码修改自动重启服务，无需手动操作：

# 全局安装nodemon
npm install -g nodemon
# 用nodemon替代node启动服务
nodemon 你的Express入口文件.js

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