什么是服务端渲染（SSR）？
服务端渲染（Server-Side Rendering，SSR）是一种将网站的 HTML、CSS 和 JavaScript 等资源在服务器端进行处理和渲染，最终返回给浏览器已经渲染好的 HTML 页面的技术。相对于传统的客户端渲染（Client-Side Rendering，CSR）方式，SSR 可以提升页面的性能和 SEO（搜索引擎优化）效果。
在 Angular 中，通过 Angular Universal 模块可以方便地实现服务端渲染。
Angular Universal 简介
Angular Universal 是 Angular 团队提供的一组工具，用于在服务器端进行渲染 Angular 应用。它提供了一种基于 Node.js 的服务端渲染方案，可以在服务器端渲染 Angular 应用并生成静态 HTML 页面。
Angular Universal 提供了一些特殊的服务和指令，使得 Angular 应用可以在服务器端运行，生成静态 HTML 页面，并在浏览器中运行 Angular 应用。这种方式可以提高应用的性能、SEO 可访问性和用户体验。
Angular Universal 的实现
要实现 Angular Universal，需要在 Angular 应用中添加一些额外的模块和配置，以及在服务器端使用 Node.js 进行渲染。下面是一个简单的 Angular Universal 应用的实现示例。
安装 Angular Universal
首先，需要在项目中安装 Angular Universal：
npm install @nguniversal/express-engine
添加 Angular Universal 模块
然后，在 Angular 应用中添加 Angular Universal 模块：
-- -------------------- ---- ------- ------ - -------- - ---- ---------------- ------ - ------------- - ---- ---------------------------- ------ - ------------ - ---- ------------------ ------ - ------------ - ---- --------------------------- ----------- ------------- --------------- -------- ------------------------------------- ------ -------- --- -------------- ---------- --------------- -- ------ ----- --------- --
在这个示例中，ServerModule 是 Angular Universal 模块，它允许在服务器端渲染 Angular 应用。BrowserModule.withServerTransition 方法用于在应用中添加一个唯一的 appId，以便 Angular Universal 可以正确地处理应用的状态和数据。
创建服务器端入口文件
然后，需要创建一个服务器端入口文件，用于启动 Angular Universal 应用。
-- -------------------- ---- ------- ------ ------------------------- ------ - -- ------- ---- ---------- ------ - ---- - ---- ------- ------ - ------------ - ---- ----- ------ - -------------- - ---- ---------------- ------ - --------------- - ---- ------------------------------ ------ - --------------- - ---- ------------------------------ ----------------- ----- --- - ---------- ----- ---- - ---------------- -- ----- ----- ----------- - ------------------- ----------------------- ----- -------- - ------------------------------ -------------------------- ------------------ ----------------- ---------- --------------- ---- ------------- -------- -------- ---------------- ------------- -------------- --------------------------- - ------- ---- ---- ------------ ----- ---- -- - ------------------- - ---- ---- ---------- -- --- --- ---------------- -- -- - ----------------- ------ --------- -- --------------------------- ---
在这个入口文件中，首先需要启用 Angular 的生产模式，然后创建一个 Express 应用。ngExpressEngine 方法用于创建一个 Angular Universal 引擎，用于渲染 Angular 应用。AppServerModule 是 Angular 应用的服务器端模块，它包含了应用的所有服务器端组件和指令。
readFileSync 方法用于读取 Angular 应用的静态 HTML 模板文件。express.static 方法用于将 Angular 应用的静态资源（如 CSS、JavaScript 文件等）映射到服务器端的静态资源目录。最后，res.render 方法用于将 Angular 应用渲染成 HTML 页面并返回给浏览器。
Angular Universal 的优缺点
优点
- 提高了页面的性能，减少了页面加载时间和首屏渲染时间。
- 提高了应用的 SEO 可访问性，使得搜索引擎更容易索引和排名应用页面。
- 提高了用户体验，使得用户可以更快地看到页面内容。
- 可以减少服务器负载，提高服务器的性能和稳定性。
缺点
- 对于像 SPA（Single Page Application）这样的应用，需要额外的工作来处理服务器端的路由和数据预取。
- 对于大型应用，需要额外的工作来处理应用的状态和数据同步。
- 对于需要实时更新的页面内容，需要使用客户端渲染或其他技术。
总结
Angular Universal 是一种实现服务端渲染的技术，可以提高页面的性能和 SEO 可访问性，同时提高用户体验。要实现 Angular Universal，需要在 Angular 应用中添加 Angular Universal 模块和配置，并使用 Node.js 在服务器端进行渲染。虽然 Angular Universal 有一些缺点，但是它仍然是一种非常有价值的技术，可以在很多场景下提高应用的质量和效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/650dac4a95b1f8cacd741fdd