1 服务器端渲染 （SSR）

SSR是Server Side Render简称，页面上的内容是通过服务端渲染生成的，浏览器直接显示服务端返回的html就可以了。

2 SSR的利弊

2.1 SSR的优势

1. 更利于SEO: 不同爬虫工作原理类似，只会爬取源码，不会执行网站的任何脚本（Google除外，据说Googlebot可以运行javaScript）。浏览器爬虫不会等待我们的数据完成之后再去抓取我们的页面数据。服务端渲染返回给客户端的是已经获取了异步数据并执行JavaScript脚本的最终HTML，网络爬中就可以抓取到完整页面的信息。

2. 更利于首屏渲染: 首屏的渲染是node发送过来的html字符串，并不依赖于js文件了，这就会使用户更快的看到页面的内容。尤其是针对大型单页应用，打包后文件体积比较大，普通客户端渲染加载所有所需文件时间较长，首页就会有一个很长的白屏等待时间。

3. 移动设备等性能不高的设备 针对这些设备，在服务器端渲染，可以大大提高用户体验。

2.2 SSR的局限

1. 服务端压力较大: 本来是通过客户端完成渲染，现在统一到服务端node服务去做。尤其是高并发访问的情况，会大量占用服务端CPU资源；
2. 学习成本相对较高: 有更多内容（e.g. node.js）需要学习。

3 Angular Universal

Angular Universal 是Angular的SSR的技术实现 – 服务器端渲染，直接传给客户端静态页面。

3.1 Node.js Express web server

可以使用node.js 的Express.js 框架，实现Angular的服务器端渲染。

1. 引入 express-engine

ng add @nguniversal/express-engine

Angular CLI 将自动添加服务器端文件，

• main.server.ts - bootstrapper for server app
• server.ts - express web server
• app/app.server.module.ts - server-side application module

2. 本地启动Web Server，渲染（生成）静态页面

npm run dev:ssr

3. 本地浏览器访问 http://localhost:4200/

3.2 限制

由于js代码在server端执行，那么自然的某些浏览器特有的全局对象是不能使用的，比如window, document, navigator, 和location。如果使用，需要使用Angular特有的替换实现，如Location，DOCUMENT。

4 总结

经历了web1.0 时代，再到前后端分离，限制的服务器端渲染（SSR）不是历史的退步，而是Web技术螺旋式的发展。是为了在特定场合、特定需求下的解决方案。没有最好的技术，只有最合适的技术。

引用

• https://angular.io/guide/universal