标签：服务器端渲染

很少有开发人员将他们的网络建设工作集中在客户体验或整体组织营销策略上。为了在搜索结果中显示您的网站，您需要在开发过程中通过一些最佳实践对网站进行一些更改，以获得最佳页面加载时间。,, 当谈到像谷歌这样的客户端渲染解决方案时，网站在搜索结果中的排名是根据算法中的指标进行的，其中网站爬虫会识别出针对特定搜索展示的最佳内容。网页的 SEO 方面将提升整个网站在搜索引擎中的排名。根据他们的说法，其中一项指标是页面加载时间。较小的页面加载时间或站点加载时间表明用户更倾向于在网站上而不是在加载速度较慢的站点上花费时间。, 通常，当用户打开网站时，浏览器向服务器发出请求，服务器通过发送没有任何内容或加载屏幕的单个 HTML 文件来响应，直到浏览器获取所有元素。这基本上意味着向用户呈现一个空白页面，直到内容被提取和编译，然后才被呈现以供显示。, 客户端框架或 CSR 的工作方式是，缓慢的初始加载有助于后续页面快速加载。但是，与服务器的通信仅用于获取运行时数据。这可能对获得网站流量非常不利。对于大多数用户网络连接来说，这个过程很慢，迫使他们停止与您的网页互动并转向另一个网页。, 它最终会使您的网页在搜索页面结果中的位置较低。由于网站性能不佳，该应用程序几乎没有机会在社交媒体上被推荐。, 1. 搜索引擎不支持渲染 JavaScript, Angular 单页应用程序几乎会将空的 html 页面作为源代码，如下所示。唯一的特殊元素是 app-root 元素，它是 Angular 应用程序的根元素。实际内容通过 java 脚本进入这个根元素。,, 像 Google 及其 Googlebot 这样的搜索引擎不支持呈现 JavaScript，并且以 JavaScript 显示的内容不会被网络爬虫注意到，因此该网站不会在搜索结果中可见。, 2. 第一个有意义的页面, 从第一页开始到有意义的可见页面，任何具有 CSR 的单页应用程序都可能需要一些时间（至少 2 秒或 3 秒）来加载第一个有意义的页面。但是如果页面在 2 或 3 秒内没有加载，大多数用户会离开页面。,, 3.现场预览, 站点和页面预览会吸引用户打开您的博客或帖子。无论我们是在社交媒体上发布博客还是通过网络通信平台分享它们，它们都会获取内容以生成预览，以便用户可以在新闻源中看到它。但是当我们的页面中没有内容时，就无法生成提要。这是因为在这样的应用程序中，源代码的根元素是空的，没有内容。,, 显然，企业社会责任在许多情况下并不理想，我们可能需要找到另一种解决方案来规避这些问题。然而，它们可以通过服务器端渲染 (SSR) 来克服。, 作为解决上述问题的第一步，我们应该首先不要将根元素留空。这样我们就可以在服务器上动态渲染根元素内容。因此，搜索引擎和站点预览可以看到有意义的内容。在此之后，角度开始并接管页面。然后应用程序将启动并运行并照常工作。, 所有这些都可以通过服务器端渲染（SSR）来实现。使用 SSR，当用户打开应用程序时，浏览器会向服务器发出请求，响应将准备好提供 HTML。,, 服务器端呈现 (SSR) 为应用程序提供了通过在服务器而不是浏览器上显示网页来在浏览器中呈现网页的能力。服务器端向客户端发送一个完全呈现的页面。客户端的 JavaScript 包接管并允许 SPA 框架运行。, SSR 可以通过 Angular Universal 实现 Angular 应用，React 的 Next.js 实现 React 应用。, Angular Universal 技术在服务器上呈现 Angular 应用程序。我们可以通过 @angular/platform-server 包获得它。, 一个普通的 Angular 应用程序在浏览器中执行，在 DOM 中呈现页面以响应用户操作。Angular Universal 在服务器上执行，生成静态应用程序页面，然后在客户端引导。这意味着应用程序通常会更快地呈现，让用户有机会在应用程序完全交互之前查看应用程序布局。（参考：https://angular.io/guide/universal）, 在旁注中，可能会注意到服务器端渲染不会提高应用程序的性能，但可以让搜索引擎和第三方社交媒体服务访问它。, 服务器端渲染骨架, AppModule 导入 BrowserModule 用于在浏览器中运行应用程序。AppModule在启动应用程序的 main.ts 文件中 配置 。这也称为 webpack 构建的入口点。它是标准的角度应用程序配置。, 对于服务器端渲染，我们在另一个名为 AppServerModule 的模块中表示整个应用程序。该模块从angular.main.server.ts导入本机 ServerModule ，它将被创建为第二个 webpack 构建（即服务器构建）的入口点。, 简而言之，我们将有两个构建，一个用于浏览器，另一个用于服务器。,, 设置 Angular 通用, 我们首先使用以下命令将 Angular Universal 添加到您的应用程序中： ng add @nguniversal/express-engine/clientProject ssr-playround, 上述命令添加/修改以下文件：, 构建应用程序,...