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
posted @ 2022-01-27 23:41  满怀期望的人  阅读(452)  评论(0编辑  收藏  举报