在将 CSR 与 React 结合使用时查看 html 源代码

Question

我正在研究如何使用 CSR 开发一个对 SEO 友好的 React 网站。 我读过很多文章，指出要提供一个对 SEO 友好的网站，应该采用 SSR 方法。

据我所知，当在 CSR 中使用浏览器的 view source 功能时，html 内容是一堆 javascript 捆绑文件，并且实际的 html 不会出现，因为 view source 仅显示从服务器端呈现的内容。而在 SSR 中，html 被渲染并传递给浏览器，显示的 html 将出现在页面的源视图中。

但是https://divar.ir（一个著名的零售商网站）似乎正在使用 CSR（单击任何链接后，数据是通过 ajax 调用从 json 格式的 api 端点获取的，然后看起来页面呈现在客户端）。

问题是，即使在单击任何链接后查看页面的源代码时，我也可以看到正在显示的实际 html。

所以总结一下，如何在 React 中使用 CSR，当我查看页面的源代码时，我实际上看到了正在显示给用户的 html？

Answer 1

服务器端渲染的 React 应用程序通常只预渲染初始页面加载。后续导航仍可能完全由客户端处理和呈现。

通过使用view source 工具，它将在新选项卡（至少在 chrome 中）中打开代码，从而从服务器重新加载当前路由。如果应用程序是服务器端渲染的，您将收到该路由的预渲染版本，因此会看到该路由的 html。

通过提供您网站的站点地图，机器人可以通过访问站点地图中提供的网址来发现所有与 SEO 相关的路线。这些请求中的每一个都是对服务器的独立请求，并且将与真实用户通过单击链接浏览页面的方式形成对比。