简介
Angular Universal 是 Angular 官方提供的 SSR（Server Side Rendering）解决方案。通过 Angular Universal，我们可以将 Angular 应用渲染成 HTML，从而使服务器可以直接返回 HTML，而不是返回 JavaScript。
相对于客户端渲染（CSR，Client Side Rendering），SSR 可以提升首屏渲染速度、SEO 和用户体验。
使用 Angular Universal
要使用 Angular Universal，需要进行如下几个步骤：
- 安装 Angular Universal
- 创建 SSR 应用
- 构建 SSR 应用
- 运行 SSR 应用
下面分别介绍这几个步骤。
安装 Angular Universal
首先，需要安装 Angular Universal。可以使用以下命令进行安装：
ng add @nguniversal/express-engine
运行以上命令后，Angular Universal 将自动安装并配置。
创建 SSR 应用
下一步是创建 SSR 应用。可以使用以下命令创建 SSR 应用：
ng generate universal <project-name>
运行以上命令后，Angular CLI 将为你自动创建一个 SSR 应用。
构建 SSR 应用
接下来需要对 SSR 应用进行构建。使用以下命令进行构建：
npm run build:ssr
运行以上命令后，Angular CLI 将自动构建 SSR 应用。
运行 SSR 应用
最后一步是运行 SSR 应用。可以使用以下命令运行 SSR 应用：
npm run serve:ssr
运行以上命令后，Angular CLI 将自动启动 SSR 应用。
示例代码
以下是一个简单的 SSR 应用示例：
-- -------------------- ---- -------
-- --------------------
------ - -------- - ---- ----------------
------ - ------------ - ---- ---------------------------
------ - --------- - ---- ---------------
------ - ------------ - ---- ------------------
-----------
-------- -
----------
-------------
--
---------- -
-------------
--
--
------ ----- --------------- ---- -------------------- ---- -------
-- --------------
------ - --------------- - ---- --------------------------
------ -------------------------
------ - -------------- - ---- ----------------
------ - -- ------- ---- ----------
------ - ---- - ---- -------
------ - ------------ - ---- -----
-----------------
----- --- - ----------
----- ----------- - ------------------- --------
----- -------- - ------------------------------ ------ ---------- --------------------------
----- - ------------------------- --------------- - - ----------------------------------
------------------ --- -------- --------- -- -
----- ------------- - ---------------------------
----- -------------- - --------------------------------------------------------
---------- -------------------------
---------- -
-
-------- ------------------
--------- --------------
--
--
---
----------------- -------- ----------
---
------------- -------- --------
---------------- ----------------- ------ ------------
-------------- -------------------------------- ------ -------------
------------ ----- ---- -- -
------------------- - ---- ---- ---------- -- -------- ---------- --------- --- -- ---
---
---------------- -- -- -
---------------------- -- -------------------------
---总结
Angular Universal 可以帮助我们将 Angular 应用改造为 SSR 应用，提升首屏渲染速度、SEO 和用户体验。使用 Angular Universal 需要进行安装、创建 SSR 应用、构建 SSR 应用和运行 SSR 应用等几个步骤。在 SSR 应用的示例代码中，我们通过使用 ServerModule 和 @nguniversal/express-engine 来实现 SSR。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a12e1e48841e9894d72413