在将 CSR 与 React 结合使用时查看 html 源代码
view html source while using CSR with React
我正在研究如何使用 CSR 开发一个 SEO 友好的 React 网站。
我读过很多文章指出,要提供一个 SEO 友好的网站,应该采用 SSR 方法。
据我所知,在 CSR 中使用浏览器的 view source
功能时,html 内容是一堆 javascript 捆绑文件,而实际的 html 不会是present since view source
仅显示从服务器端呈现的内容。而在 SSR 中 html 被呈现并传递给浏览器,显示的 html 将出现在页面的源视图中。
但是 https://divar.ir(一个知名的零售商网站)似乎正在使用 CSR(单击任何 link 后,数据是从 [=33= 中的 api 端点获取的] 格式通过 ajax 调用,然后看起来页面在客户端呈现)。
问题是,即使在单击任何 link 之后查看页面的源代码时,我也可以看到显示的实际 html。
所以总结一下,我如何在 React 中使用 CSR,当我查看页面的源代码时,我实际上看到了正在显示给用户的 html?
服务器端呈现的 React 应用程序通常只预呈现初始页面加载。后续导航可能仍完全由客户端处理和呈现。
通过使用 view source
工具,它将在新选项卡中打开代码(至少在 chrome 中),这会导致从服务器重新加载当前路由。如果应用程序是服务器端渲染的,您将收到该路由的预渲染版本,因此会看到该路由的 html。
通过提供您网站的站点地图,机器人可以通过访问站点地图中提供的网址来发现所有与 SEO 相关的路线。这些请求中的每一个都是对服务器的独立请求,并且将被预呈现,这与真实用户通过单击链接导航页面的方式形成对比。
我正在研究如何使用 CSR 开发一个 SEO 友好的 React 网站。 我读过很多文章指出,要提供一个 SEO 友好的网站,应该采用 SSR 方法。
据我所知,在 CSR 中使用浏览器的 view source
功能时,html 内容是一堆 javascript 捆绑文件,而实际的 html 不会是present since view source
仅显示从服务器端呈现的内容。而在 SSR 中 html 被呈现并传递给浏览器,显示的 html 将出现在页面的源视图中。
但是 https://divar.ir(一个知名的零售商网站)似乎正在使用 CSR(单击任何 link 后,数据是从 [=33= 中的 api 端点获取的] 格式通过 ajax 调用,然后看起来页面在客户端呈现)。
问题是,即使在单击任何 link 之后查看页面的源代码时,我也可以看到显示的实际 html。
所以总结一下,我如何在 React 中使用 CSR,当我查看页面的源代码时,我实际上看到了正在显示给用户的 html?
服务器端呈现的 React 应用程序通常只预呈现初始页面加载。后续导航可能仍完全由客户端处理和呈现。
通过使用 view source
工具,它将在新选项卡中打开代码(至少在 chrome 中),这会导致从服务器重新加载当前路由。如果应用程序是服务器端渲染的,您将收到该路由的预渲染版本,因此会看到该路由的 html。
通过提供您网站的站点地图,机器人可以通过访问站点地图中提供的网址来发现所有与 SEO 相关的路线。这些请求中的每一个都是对服务器的独立请求,并且将被预呈现,这与真实用户通过单击链接导航页面的方式形成对比。