reactjs - 动态渲染与混合渲染

Question

我观看了Google's conference on SEO他们谈论动态和混合渲染。但是，我不明白其中的区别是什么？

感谢您的宝贵时间。

Answer 1

这两种方法都是通过补充搜索引擎机器人处理大量 JavaScript 的不足来改进 SEO 的方法。

<强>1。动态渲染

这是一种改善 SEO 的解决方法。它只是将静态 html 内容传递给爬虫(机器人)，并让用户保持一切不变。

动态渲染是检测爬虫(通过检查用户代理)并为它们提供静态 html 内容，无需任何 JavaScript，由 headless 浏览器完全渲染，如 puppeteer 。您可能需要托管一个渲染服务器，例如 Rendertron处理上面描述的渲染过程。

优势

• 它不依赖于更改当前的前端架构。您不需要更改代码结构来构建(例如服务器端渲染结构)或通过采用预渲染将您的网站制作为静态 html。
• 它适合大型且快速变化的网站。

本次 session 中也提到了Youtube: Deliver search-friendly JavaScript-powered websites (Google I/O '18)

-

<强>2。混合渲染

这是针对 Google 搜索的长期建议。

混合渲染并不是一个新概念。 这意味着您将一部分内容(您希望由 googlebot 对其进行索引)作为静态 html(可能由模板引擎或任何其他方式生成)发送给客户端和机器人。然后运行 ​​JavaScript 来显示其余内容，例如个性化内容。

这很有意义，因为我们通过静态 html 发送主要内容，并为用户体验提供精彩的 FMP(首次有意义的绘画)，并减轻 Googlebot 消耗资源和时间来理解您的网站的负担。我们仍然可以使用强大的 JavaScript 为您的网站构建更多功能。

但是，实现起来会有点棘手，尤其是在某些特定和流行的架构中使用现代框架。例如单页应用程序。

您还可以查看此 session 以获取更多信息Youtube: Deliver search-friendly JavaScript-powered websites (Google I/O '18)

-

附注更详细的各种渲染结构请查看Rendering on the Web 。对于那些想要了解不同结构之间权衡的人来说，这是一篇很棒的文章。