JavaScript 的同构渲染与动态渲染

任何人都可以更改其内容交付给用户和搜索引擎的方式。进行这些改变的秘诀在于渲染方法。 

不同的渲染方法可以改变客户端、请求页面的搜索引擎机器人或用户浏览器的渲染量。最流行的两种渲染方法是同构渲染和动态渲染。 

同构渲染利用通用 JavaScript，因为它可以在客户端或服务器端进行渲染。另一方面，动态渲染通常被认为是不在 JavaScript 上运行的社交媒体爬虫或搜索引擎的解决方法。这种渲染方法是 Google 或 Bing 等搜索引擎推荐的。 

这两种渲染方法都有其特定的优点，因此在它们之间进行选择可能会有点困难。本指南将通过讨论这些渲染方法以及如何从中受益，帮助您决定如何渲染您的网站。 

想提高您的搜索引擎优化吗？下载免费的 SEO 技术指南以 优化抓取预算 ，并了解如何提高网站在搜索引擎上的可见度。

什么是同构渲染

同构 JavaScript (js)，通常称为通用 JavaScript，在服务器端和客户端上呈现。在这种渲染方法下，预渲染用于向搜索引擎或用户提供内容。之后，JavaScript 所需的交互性将在客户端处理。 

同构 JavaScript 意味着应用程序在服务器和客户端上使用相似的渲染引擎。这种渲染方法使开发人员更容易维护标记模板，从而简化了 Web 开发。 

同构渲染意味着使用 Node.js/Io.js 和 JavaScript，因为它们允许重用库，并且允许浏览 JavaScript 代码在 Node.js/Io.js 环境中运行，而无需进行太多修改。Node.js/Io.js 和 JavaScript 在编码生态系统中的这种可互换性可以支持多种不同的同构框架，例如 Rendr、React.js、lazo.js 等。一些知名品牌正在实施和试验同构 JavaScript；例如 Airbnb 和 Twitter。 

什么是动态渲染？

动态渲染将完全渲染的内容发送到搜索引擎，同时为人类访问者提供正常和客户端渲染的内容。这是预渲染，但仅针对搜索引擎机器人完成。它创建页面的静态或服务器端渲染 HTML 版本并将其提供给搜索引擎机器人，例如 Bingbot、Googlebot 等。 

在这种情况下，页面的呈现方式会根据用户代理的调用而有所不同 - 它会在预呈现内容和特定用户代理的客户端呈现内容之间切换。动态渲染将正常的客户端渲染内容发送给用户，并在发送给搜索引擎时将动态内容转换为 HTML。 

动态渲染的主要优点是可以轻松地对内容进行爬网和索引，而无需执行 JavaScript。 

同构渲染的好处

由于同构渲染适用于服务器端和客户端，因此它可以为用户带来许多好处。其中一些好处包括：

搜索引擎正确索引页面的能力

Backbone.js、Angular.js、Ember.js等框架最常用于编写受保护的应用程序。这些应用程序通常需要用户名和密码才能访问。 

由于单页应用程序没有公共仪表板，因此它们提供受保护的资源并且不需要 Web 索引。例如，Evernote 和 Gmail 等平台要求每个用户输入用户凭据，然后才能看到实际的应用程序。  

然而，绝大多数应用程序在登录后都没有受到保护。对于公共页面和应用程序，搜索引擎优化至关重要，因为它们的商业模式严重依赖有机流量和搜索索引。谷歌现在在其爬虫上具有JavaScript渲染功能，这意味着谷歌将像普通浏览器一样渲染和索引单页应用程序的内容。然而，谷歌仍在尝试更好地理解这些页面，并且在渲染过程中可能会出错。 

为了减少被爬虫忽视的机会，开发人员仍然需要将非 JavaScript 渲染镜像到支持 JavaScript 的渲染。主页必须由搜索引擎编制索引，以便客户轻松找到可公开访问的页面。 

有些应用程序依靠快速性能而蓬勃发展，而另一些应用程序则优先考虑正确的搜索引擎索引。根据 Twitter 的研究，提高首页的 加载速度可以提高网站在搜索引擎索引中的总体性能。

研究证实，服务器端渲染的最佳实践可以产生闪电般快速的首页加载。当用户浏览页面时，可以加载所有其他网站代码。 

当实施这种做法时，用户将不会在第一页上看到经典的“正在加载”消息。当他们打开它时，他们只会注意到一个完全渲染的网页，并拥有更好的用户体验，增强了整个应用程序的可用性，从而最终带来更好的流量。 

更好的代码可维护性

您的网站或网页上的代码越多，您和您的团队需要的支持就越多。这就是为什么您应该避免对同一页面使用不同的模板。Handlebars、Mustache 和 Dust 等模板引擎以及 Node.js/Io.js 使在服务器上使用浏览器模块变得简单。 

为了更好地维护代码，开发人员还可以在浏览器和服务器上重复使用相同的实用程序和库。这进一步减少了对任何多余代码的需求。 

像 lodash、SuperAgent、Underscore.js 和 Request 这样的库之所以流行，也有类似的原因：在浏览器和服务器上使用相同的库可以实现代码重用以及更好、更高效的开发，并减少维护代码所花费的时间。 

此外，程序员可以开发自定义模块，这些模块可以在服务器和浏览器之间共享。这些自定义模块将允许您的 Express.js 和 Node.js 应用程序向浏览器公开某些模板，这些模板可供浏览器的 JavaScript 代码使用。 

同构 JavaScript 的另一个好处是可以在服务器和浏览器中轻松共享数据模型，从而最大限度地提高服务器和浏览器之间的一致性。例如，只需调整 Backbone.js 模型，程序员就可以提高应用程序的性能。 

如果您希望在 Web 开发中实现一些同构，有多种框架和库允许开发人员在 JavaScript 中使用同构。一些比较著名的选择包括 React.js、Lazo.js 和 Rendr。让我们比较一下这些库： 

• 使成为

这个库是在 Airbnb 开发的，解决了首页加载速度慢的问题。该库被设计为在服务器上使用 Backbone.js 架构，并且它也适用于 Expres.js。 

• React.js

与普遍看法相反，React.js 不是模型-视图-控制器 (MVC) 框架。相反，它具有 MVC 的视图层。 

React.js 可以与其他几个前端库一起使用，例如 Backbone.js。然而，React.js 通常与 JSX 语言一起使用，JSX 语言是 XML/HTML 和 JavaScript 的混合体。JSX 代码在浏览器上执行之前符合本机 JavaScript。使用 React.js 的主要好处是它使用虚拟文档对象模型 (DOM) 进行渲染，这意味着只有增量更改才会在页面上渲染 - 未更改的元素将保持不变。许多人认为这个功能使 React.js 比其他库更好。 

• 套索.js

Lazo 库与 Rendr 类似，因为它也使用 Backbone.js。此外，它还利用 jQuery 和 RequireJS 前端 JavaScript 库。 

更好的用户体验

当应用程序的重要部分在服务器端用真实数据呈现时，同构 React 应用程序将能够显示更有意义的初始页面。但是，客户端呈现应用程序在获取所需的所有外部数据之前将无法显示任何有意义的信息。当用户等待时，他们只会看到加载指示器，这会影响他们的应用程序体验。 

更快的整体加载时间

由于在响应之前在服务器端获取数据和渲染更多标记的过程，与客户端渲染应用程序相比，同构应用程序在显示初始页面时会慢一些。然而，总体完成时间和最终用户界面会快得多，因为服务器端的数据访问比客户端 API 请求要快得多。

动态渲染的好处

动态渲染的工作方式与同构渲染不同。使用这种渲染方法有其自身的一系列优点，包括：

• 动态渲染需要更少的时间和资源，因为开发人员不需要为机器人和人类预渲染内容。 

• 动态渲染生成的内容可以被爬网和索引，而无需执行 JavaScript。

• 人类访问者可以从任何需要 JavaScript 的交互元素中受益。 

• 动态渲染解决了与页面速度相关的抓取预算问题：Google可以抓取网站上的更多页面。 

为什么动态渲染对营销人员很重要？

拥有大量动态和 JavaScript 驱动内容的大型网站的排名可能会有点困难，因为搜索引擎在抓取和索引它们时会遇到困难。动态渲染可以帮助那些由于内容的大小和负载而难以进行内容营销的大型网站。 

动态渲染允许开发人员向搜索引擎机器人提供静态 HTML 或 SEO 友好版本的网站。本质上，开发人员正在将他们的网站翻译成谷歌的机器人搜索语言，以获得最佳的搜索结果和排名。访问者还将获得更好的浏览体验。

动态渲染的 SEO 优势

如果 Google 无法找到您的内容，那么为策划最好、最准确的内容而付出的所有努力都将付诸东流。许多公司在其网站上面临索引问题，并且不知道这会妨碍他们的结果和排名

尽管您可能能够看到网站抓取统计信息，并且搜索引擎正在下载信息，但您可能仍然想知道正在下载哪些信息以及实际可以访问多少信息。通过动态渲染，您可以消除所有这些不确定性：您的所有内容都被索引，因此它们都会影响您的流量和排名。 

通过动态渲染，您的网站仍然轻巧且易于抓取，从而保持 Google 的青睐并防止流量下降。 

为什么考虑同构 React 实现？

实现同构渲染并不是一个简单的任务。它需要技术知识和大量的准备。因此，如果您在网站开发中实施同构渲染 ，您应该寻求帮助并做一些基础研究。以下是在实现同构渲染之前您应该了解的一些信息。 

同构过程

同构过程允许您使用以下步骤在浏览器上呈现 Web 应用程序：

当用户请求页面时，服务器会查询数据库和 API，并简单地向应用程序询问 HTML。然后，应用程序呈现其拥有的所有给定信息，并且服务器将收集到的信息发送给客户端或用户。 

当应用程序在客户端呈现时，客户端从服务器请求 JavaScript 和应用程序的引导程序。客户端应用程序识别预渲染 HTML 并将其全部绑定在一起。当用户查看初始内容时，上述所有过程都在发生，并且应用程序在初始内容显示在屏幕上几秒钟后完成加载。 

同构过程的优点

同构过程的优点可以分为两个方面。 

• 功能方面

• 该代码在应用程序的前端和后端之间共享。 

• 加载时间更快，并且自动支持旧版浏览器。 

• 技术方面

• 开发人员需要学习的语言更少。 

• 该图书馆将能够与自身集成。 

• 当初始页面加载时，服务器呈现 HTML。 

• 数据以一致的数据格式存储。 

• 开发人员将需要编写和维护更少的代码。 

同构过程的缺点

同构过程有一些缺点：

• 由于应用程序的架构复杂，故障排除具有挑战性。 

• 敏感数据更容易在服务器上暴露。 

• 整个应用程序的架构变得更加复杂。 

敏感数据如何暴露？

当开发者在同构过程中对面向客户端的模块进行授权时，该模块存在一定的依赖关系，在该依赖关系下需要包含敏感数据的文件。该应用程序与该特定文件捆绑在一起并发送给客户端。客户端将拥有所有捆绑的机密和私人数据，因此攻击者可以简单地搜索捆绑文件，将其破解并访问敏感数据。 

同构应用程序优先级

同构过程对于应用程序的开发和生产环境有几个优先级。这些包括：

• 发展

• 需要额外的往返来获取数据。 

• 需要工具来允许开发人员查看应用程序的内部状态。 

• 源代码更改后应用程序更新很快。 

• 代码需要清晰、有组织且高度可追溯。 

• 生产

• 代码不应暴露敏感数据并且应该紧凑。 

• 额外的往返可能会减慢移动应用程序的速度，并增加用户在正确加载应用程序之前关闭应用程序的机会。 

• 需要工具来暴露错误并跟踪用户的活动。 

• 应用程序通常不关心源的更新。 

同构过程中使用的重要库

开发人员可以在同构 React Web 开发中使用多个库 。其中最值得注意的一些是：

• 表达 

该库用于获取数据并创建初始状态。它使用 React 在服务器上发送应用程序。它还在开发到服务器应用程序包中呈现 Webpack 实例。该库加载模板和服务器静态文件。 

• 反应 

该库在服务器上呈现应用程序，处理服务内容（基于路由）并在客户端呈现和支持应用程序。 

• 网页包

该库将应用程序编译为 ESS JavaScript 并为其提供服务。它还将更新的模块直接注入客户端。Webpack 将模块编译成一个静态 ESS JavaScript，用于生产。 

• 巴别塔

Babel 由 Webpack 库使用。它将所有 ES2015 和 JSX 编译成客户端友好的 ES5。 

代码共享、数据注入和服务器渲染

通过 同构渲染，开发人员可以完全控制他们的网站。以下是最大化这种控制的几种方法：

• 代码共享 

代码共享是同构 React Web 开发的主要好处。这种架构可以为服务器端和客户端使用一些相同的代码，从而允许服务器加载客户端库并使服务器渲染成为可能。 

• 数据注入 

数据注入是服务器准备数据的过程。然后该数据被转换为 JSON 并注入到 index.js 中。结果是页面的初始加载时间更长，客户端应用程序立即显示数据。不涉及往返。 

• 服务器渲染 

服务器渲染是服务器完全准备好数据的过程。应用程序的 HTML 在服务器中呈现，这会导致初始加载时间更长，但它可能比数据注入快一点。即使数据未完全获取，客户端应用程序也可以看到渲染的视图。 

ReactDOM服务器

ReactDOMServer 是一个对象，使开发人员能够将组件呈现为静态标记。它生成基于父组件和初始状态的静态 HTML 标记。借助 ReactDOMServer，开发人员可以利用虚拟 DOM，该虚拟 DOM 通常用于客户端来提升或提升性能。由于ReactDOMServer是在服务器上设计的，因此不依赖于浏览器。 

结论 

无论您使用哪种呈现方法，请确保您所提供的内容可访问并且适用于请求它的搜索引擎机器人。您应该专注于确保即使是不太先进的搜索引擎、设备甚至浏览器也可以访问您的内容。 

您选择的渲染必须符合您的网站和业务的需求。在做出选择之前，请评估您的需求和目标。在某些情况下，服务器端渲染(SSR) 方法效果最好。在其他情况下，客户端呈现方法可能最适合您的站点。

同构渲染是结合了服务器端渲染和客户端渲染优点的解决方案。只要精心设计和平衡，它就能提供最大化的结果。由于您的网站可以将服务器渲染和客户端渲染的不同区域组合在一起，因此咨询专家非常有帮助。