React服务端渲染：如何区分URL输入与组件发起的GET请求？

这确实是SSR React项目里非常典型的痛点——用查询参数标记非初始请求的方式很容易导致URL污染，刷新时还会出现数据裸显的问题。我来分享几个更优雅的解决方案：

1. 自定义请求头区分（最推荐） #

客户端发起数据请求时，在fetch或axios中添加自定义请求头，服务端通过检查这个头来判断请求来源：

客户端代码（componentDidMount中） #

async componentDidMount() {
  const response = await fetch('/api/data', {
    headers: {
      // 自定义头，标识这是客户端路由后的请求
      'X-Client-Request': 'true'
    }
  });
  const data = await response.json();
  // 处理数据更新组件状态
}

服务端代码（server.js） #

app.get('/api/data', (req, res) => {
  if (req.headers['x-client-request'] === 'true') {
    // 客户端componentDidMount发起的请求，仅返回纯数据
    res.json({ data: 'your-target-data' });
  } else {
    // 初始请求（地址栏输入/刷新），执行SSR并返回带初始数据的完整页面
    const appString = renderToString(<App initialData={yourPreparedData} />);
    res.send(`
      <html>
        <head><link rel="stylesheet" href="/styles.css"></head>
        <body>
          <div id="root">${appString}</div>
          <script src="/bundle.js"></script>
        </body>
      </html>
    `);
  }
});

这种方式完全不会污染URL，刷新页面时浏览器发起的请求不会携带自定义头，服务端会自动识别为初始请求并执行SSR，完美解决你遇到的问题。

2. 利用Accept请求头辅助判断 #

初始页面请求的Accept头通常是text/html（浏览器默认请求HTML文档），而客户端fetch数据时可以明确设置Accept: application/json：

客户端代码 #

async componentDidMount() {
  const response = await fetch('/api/data', {
    headers: {
      'Accept': 'application/json'
    }
  });
  const data = await response.json();
}

服务端代码 #

app.get('/api/data', (req, res) => {
  if (req.headers.accept.includes('application/json')) {
    res.json({ data: 'your-target-data' });
  } else {
    // 执行SSR返回完整页面
  }
});

不过要注意：部分情况下客户端请求可能也会带上text/html（比如某些默认配置），所以最好和自定义请求头结合使用，双重保证准确性。

3. Cookie标记（需谨慎使用） #

当客户端首次渲染完成后，设置一个Cookie标记当前是已加载的客户端环境：

客户端代码（App.js的componentDidMount） #

componentDidMount() {
  // 设置会话级Cookie，关闭浏览器后自动失效
  document.cookie = "client_rendered=true; path=/";
}

服务端代码 #

app.get('/api/data', (req, res) => {
  const isClientRendered = req.cookies.client_rendered === 'true';
  // 结合Accept头判断，避免刷新时误判
  if (isClientRendered && req.headers.accept.includes('application/json')) {
    res.json({ data: 'your-target-data' });
  } else {
    // 执行SSR返回完整页面
  }
});

⚠️ 注意：这个方案单独使用有缺陷——刷新页面时浏览器会携带Cookie，但此时我们需要服务端重新执行SSR，所以必须结合Accept头做二次判断，才能避免逻辑错误。

总结 #

最推荐的是自定义请求头方案，它实现简单、可靠，完全避免了URL参数带来的问题，是SSR项目中区分请求来源的标准做法之一。

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