引言
在现如今的 Web 应用开发中，单页面应用（SPA）正在风靡。Angular 作为一款前端 MVVM 框架，以其优秀的性能和灵活的开发方式，成为了 Web 应用开发中的热门选项。但是，随着应用规模的扩大，客户端渲染的弊端也越来越显著，例如首屏加载速度慢、SEO 劣化、建立稳定的网络连接等。因此，使用服务端渲染（SSR）成为解决这些问题的一个好方法。
Angular2 是一款极佳的前端框架，但并没有提供一个内建的服务端渲染选项。为了在 Angular2 中实现服务端渲染，我们需要使用第三方解决方案。在本文中，我们将介绍使用 Angular Universal 进行服务端渲染的方法。
Angular Universal 简介
Angular Universal 是一个官方支持的服务端渲染（SSR）框架，可用于 Angular2+ 应用程序。它可以在服务器端运行 Angular2+ 应用程序，并将首次加载的 HTML 文档直接发送到浏览器。在接下来的页面中，应用程序将在浏览器中渲染，这样用户将看到更快的加载和响应速度。
Angular Universal 右侧基于 Node.js，通过 Node.js 应用程序来运行 Angular2+ 应用程序。在传统的客户端渲染（CSR）中，全局上下文是浏览器窗口对象，而在 Angular Universal 中，全局上下文是 Node.js 运行时环境。
Angular Universal 安装和配置
安装 Angular Universal 非常简单。使用 npm，可以通过以下命令在你的应用中安装它：
--- ------- ------ ---------------------------
Angular Universal 还需要 express 服务器来运行。你可以通过以下命令安装 express：
--- - -------
接下来，我们需要在项目中安装一些必要的依赖项。我们需要安装以下依赖项：
--- ------- ---------- --------- ---------------------- -----------
以上依赖项将用于处理 TypeScript 文件，生成静态文件以及将应用程序打包到一个 JS 文件中。
我们还需要创建一个名为 server.ts 的文件，它将包含用于服务端渲染的设置。
Angular Universal 服务端渲染
服务端渲染的过程如下：
- 在服务器端运行 Angular 应用程序。
- 在服务器端使用 DOM API 生成 HTML 文档。
- 将静态 HTML 发送到浏览器端。
- 在浏览器中运行 Angular 应用程序并对其进行更新。
让我们看一下 Angular Universal 服务端渲染的代码示例：
-- ---------
------ -------------------------
------ - -------------- - ---- ----------------
------ - ------------------- - ---- ---------------------------
------ - -- ------- ---- ----------
------ - -- ---- ---- -------
------ - ------------ - ---- -----
-----------------
----- --- - ----------
----- ---- - ---------------- -- -----
----- ----------- - ------------------- --------
----- -------- - -------------------------------- --------
----- - ------------------------ - - ------------------------------
------------------ --- -------- --------- -- -
----- ---- - - --------- --------- ---- --------------- --
--------------------------------------------- -----
---------- -- -------------- -------
---
------------- -------- --------
---------------- -------
----------------------------------- - ------ ----- ----
------------- ----- ---- -- -
------------------- - --- ---
---
---------------- -- -- ---------------------- --- ----------------------------以上文件中，我们首先导入需要的依赖。然后，使用 enableProdMode() 函数启用生产模式。接着，我们通过 express 库创建一个应用程序实例。为了生成 HTML，我们读取 index.html 模板文件，使用 renderModuleFactory 函数，结合运行时环境（AppServerModuleNgFactory）以及模板作为参数生成静态 HTML。
在 engine 函数中，我们使用应用程序服务器端模块 AppServerModuleNgFactory 渲染静态 HTML。然后，我们使用 app.set 函数配置 HTML 渲染引擎，并使用 app.use 函数将应用程序的静态资源（如图像、JavaScript 文件等）提供给客户端。
最后，我们使用 app.get() 函数获取用户请求，并使用 HTML 渲染引擎将此请求的视图渲染为静态 HTML。
现在，我们已经成功实现了服务端渲染。接下来是一些针对服务端渲染进行优化的方法。
Angular Universal 服务端渲染能为你的网站做什么？
Angular Universal 服务端渲染可以为你的网站带来多种好处，例如快速加载、提高 SEO、改善访问性能等。下面是这些好处的具体细节：
快速加载
服务端渲染可以大大缩短首次加载时间。由于静态 HTML 是在服务器端生成的，因此用户可以更快地看到内容。在此之后，应用程序的 JavaScript 代码将在浏览器中运行，从而使应用程序变得更加交互式。这样用户就可以在加载进程中与该应用程序进行交互，而无需等待 JavaScript 文件的下载和执行。
提高 SEO
由于服务端渲染可以在生成 HTML 时提供完整的网页内容，因此爬虫可以更轻松地抓取您的网站。这可以提高搜索引擎优化的值，也可以使您的网站更容易被发现。
改善访问性能
服务端渲染可以帮助降低服务器成本，因为每个请求都可以在服务器上启动并使用前端 JavaScript 代码。这可以通过节省服务器时间和带宽来降低运营成本。
结论
在本文中，我们介绍了在 Angular2 中使用 Angular Universal 进行服务端渲染的方法。使用服务端渲染可以提高网站性能和 SEO，并减少资源开销。通过本文提供的代码示例，您可以轻松地为您的 Angular2 应用程序添加服务端渲染的功能。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/67219a7e2e7021665e082a0a