很少有开发人员将他们的网络建设工作集中在客户体验或整体组织营销策略上。为了在搜索结果中显示您的网站，您需要在开发过程中通过一些最佳实践对网站进行一些更改，以获得最佳页面加载时间。

当谈到像谷歌这样的客户端渲染解决方案时，网站在搜索结果中的排名是根据算法中的指标进行的，其中网站爬虫会识别出针对特定搜索展示的最佳内容。网页的SEO方面将提升整个网站在搜索引擎中的排名。根据他们的说法，其中一项指标是页面加载时间。较小的页面加载时间或站点加载时间表明用户更倾向于在网站上而不是在加载速度较慢的站点上花费时间。

通常，当用户打开网站时，浏览器向服务器发出请求，服务器通过发送没有任何内容或加载屏幕的单个HTML文件来响应，直到浏览器获取所有元素。这基本上意味着向用户呈现一个空白页面，直到内容被提取和编译，然后才被呈现以供显示。

客户端框架或CSR的工作方式是，缓慢的初始加载有助于后续页面快速加载。与服务器的通信仅用于获取运行时数据。这可能对获得网站流量非常不利。对于大多数用户网络连接来说，这个过程很慢，迫使他们停止与您的网页互动并转向另一个网页。

它最终会使您的网页在搜索页面结果中的位置较低。由于网站性能不佳，该应用程序几乎没有机会在社交媒体上被推荐。

1.搜索引擎不支持渲染JavaScript

Angular单页应用程序几乎会将空的html页面作为源代码，如下所示。唯一的特殊元素是app-root元素，它是Angular应用程序的根元素。实际内容通过java脚本进入这个根元素。

像Google及其Googlebot这样的搜索引擎不支持呈现JavaScript，并且以JavaScript显示的内容不会被网络爬虫注意到，因此该网站不会在搜索结果中可见。

从第一页开始到有意义的可见页面，任何具有CSR的单页应用程序都可能需要一些时间（至少2秒或3秒）来加载第一个有意义的页面。但是如果页面在2或3秒内没有加载，大多数用户会离开页面。

站点和页面预览会吸引用户打开您的博客或帖子。无论我们是在社交媒体上发布博客还是通过网络通信平台分享它们，它们都会获取内容以生成预览，以便用户可以在新闻源中看到它。但是当我们的页面中没有内容时，就无法生成提要。这是因为在这样的应用程序中，源代码的根元素是空的，没有内容。

用SSR代替CSR，让网站对SEO有效

显然，企业社会责任在许多情况下并不理想，我们可能需要找到另一种解决方案来规避这些问题。它们可以通过服务器端渲染(SSR)来克服。

作为解决上述问题的第一步，我们应该首先不要将根元素留空。这样我们就可以在服务器上动态渲染根元素内容。因此，搜索引擎和站点预览可以看到有意义的内容。在此之后，角度开始并接管页面。然后应用程序将启动并运行并照常工作。

所有这些都可以通过服务器端渲染（SSR）来实现。使用SSR，当用户打开应用程序时，浏览器会向服务器发出请求，响应将准备好提供HTML。

服务器端呈现(SSR)为应用程序提供了通过在服务器而不是浏览器上显示网页来在浏览器中呈现网页的能力。服务器端向客户端发送一个完全呈现的页面。客户端的JavaScript包接管并允许SPA框架运行。

SSR可以通过AngularUniversal实现Angular应用，React的Next.js实现React应用。

使用AngularUniversal启用服务器端渲染

AngularUniversal技术在服务器上呈现Angular应用程序。我们可以通过@angular/platform-server包获得它。

一个普通的Angular应用程序在浏览器中执行，在DOM中呈现页面以响应用户操作。AngularUniversal在服务器上执行，生成静态应用程序页面，然后在客户端引导。这意味着应用程序通常会更快地呈现，让用户有机会在应用程序完全交互之前查看应用程序布局。（参考：https://angular.io/guide/universal）

在旁注中，可能会注意到服务器端渲染不会提高应用程序的性能，但可以让搜索引擎和第三方社交媒体服务访问它。

AppModule导入BrowserModule用于在浏览器中运行应用程序。AppModule在启动应用程序的main.ts文件中配置。这也称为webpack构建的入口点。它是标准的角度应用程序配置。

对于服务器端渲染，我们在另一个名为AppServerModule的模块中表示整个应用程序。该模块从angular.main.server.ts导入本机ServerModule，它将被创建为第二个webpack构建（即服务器构建）的入口点。

简而言之，我们将有两个构建，一个用于浏览器，另一个用于服务器。

我们首先使用以下命令将AngularUniversal添加到您的应用程序中：ngadd@nguniversal/express-engine/clientProjectssr-playround

上述命令添加/修改以下文件：

下一步，我们为应用程序构建客户端和服务器。客户端和服务器的构建过程不同，因为这两个平台都不同。

构建完成后，我们可以在“dist”文件夹下看到客户端和服务器的两个子文件夹。

接下来我们需要一个Node.js服务器来执行以下功能：

现在我们来到设置中最有趣的部分，即设置Express引擎以呈现HTML。

使用SSR与CSR相比，使用SSR的优缺点可以通过将其比喻为超市和餐馆来描述。使用客户端渲染，您可以去超市一次，然后花时间四处走动并挑选食品以备存本月。在最初的消费之后，在家中的每顿饭都可以按需提供食物。

但是对于服务器端渲染，渲染一个页面元素就像你每次想吃饭时开车去餐厅一样。每顿饭你都会来回走动，但它会立即让人饱足，并且不需要大量的初始准备时间来购买食材。实际上，SSR只是提高了您的网站/应用程序在搜索结果中的性能。这最终会在更大的业务场景中得到回报。