Angular-服务端渲染，universal

1、服务端渲染优势

答：

a、利于爬虫抓取网页数据

b、提高手机和低功耗设备的性能

c、优化首屏加载时间，提高用户体验

注意：angular服务端渲染会先在服务器端渲染好的只是静态的页面内容，然后响应客户端，而一些交互在加载完成之前是不可用的

2、如何创建服务端渲染的angular universal应用

答：universal应用使用的是platform-server而不是platform-browser

a、通过ng add @nguniversal/express-engine工具包，安装过程中angular会创建main.server.ts\app/app-server.module.ts\server.ts三个文件，angular内置的方式是通过nodejs的express前端服务器框架实现的Universal 应用的服务器，同时也支持其他类型的服务器作为Universal 应用的服务器，只要能调用universal提供的renderMoudle()方法即可

b、服务器在接收到请求时，会将请求传给NgUniversal的ngExpressEngine，而其内部实现会调用universal应用提供的renderModule()方法，此方法接受一个参数对象，该对象包含bootstrap属性，此属性的值就是用于引导应用程序的根NgModule或者NgModule的工厂，作为angular服务器端渲染和angular应用之间的桥梁

c、ngExpressEngine()方法会返回一个解析成渲染好的页面的一个Promise，然后引擎在该Promise的回调函数中将页面返回给web服务器，然后服务器响应客户端的请求

注意：在服务端发起XHR请求时，要使用绝对路径，可以在请求处理的配置参数对象中指定url属性的值

3、应用程序打包命令

答：

a、npm run dev:ssr：本地测试环境使用，类似于ng server但是更慢，同时会在发生更改时刷新浏览器重新加载数据

b、ng build && ng run app-name:server：生产环境下构建服务器脚本和应用程序

c、npm run server:ssr：仅用于本地测试环境，启动服务器端渲染为本地应用程序提供服务，同时依赖于ng run build:ssr的构建服务，因此也要运行此命令

d、npm run prerender：预先渲染应用程序的页面，https://angular.cn/guide/prerendering

参考文档：https://angular.cn/guide/universal#universal-engine