angular ssr服务端渲染(angular universal)

一、介绍

angular应用本身是在客户端渲染的,由服务端返回代码到客户端,客户端再生成用户界面。而服务端渲染是由服务端直接返回一个完整的页面,不需要客户端生成。angular universal采用express(nodejs web应用框架)服务器来完成服务端渲染。

二、如何配置

1.创建服务端应用模块

1
ng add @nguniversal/express-engine

运行上面命令后会生成三个文件server.ts(express框架服务端app模块),app.server.module.ts(服务端应用模块),main.server.ts(用于服务器应用程序的起步配置文件)。
2.本地运行web server

1
yarn dev:ssr

3.访问本地ip

1
127.0.0.1:4200/

通过打开控制台,可以看到load加载时间进行对比。

三、服务端渲染(也称server side render 简称SSR)的优缺点

优点:

1.更利于SEO,帮助网络爬虫

当我们再用百度、谷歌搜索想要的内容时,我们从服务端返回的静态页面,更加容易被搜索出来,因为从服务端返回的时候就已经是完整的页面了。

2.首屏加速,快速显示第一页

我们在实际做某个应用的时候,肯定是希望有很有的用户体验的,而快速加载出第一页能让用户马上看到想要的内容,从而提高用户的专注度,不容易导致用户流失。

3.提升手机和低功耗设备上的性能

有些手机设备不支持js执行脚本,而服务端返回的页面不包含js。从而提升手机以及低功耗设备的访问性能。

缺点:

1.会给服务端造成一定压力,如果访问过多,会占用大量的服务器资源。

四、关于angular universal服务端渲染

1.angular universal服务器

universal 服务器实际用的是node.js express服务器,其服务器是使用 Universal 模板引擎渲染出的静态 HTML 来响应对应用页面的请求。

2.Universal 模板引擎

server.ts 文件中 ngExpressEngine() 是对 Universal 的 renderModule() 函数的封装。它会把客户端请求转换成服务端渲染的 HTML 页面。

3.过滤请求的URL

如果应用是在服务器中运行,那么点击应用任何一个链接都会请求服务器,这个时候我们就需要区分开来请求是来自哪里了,根据不同的请求作不同的处理。一般静态资源的请求都会带有一个扩展名,而数据请求都会以特定名称开头(例如/api),导航一般不带文件扩展名。

4.提供安全的静态文件

可以把客户端的静态资源都放到dist文件里面,并且设置只允许客户端请求dist目录里面的文件。

5.无法使用浏览器某些api及其他能力

angular应用没有运行在浏览器中,所以也无法使用浏览器某些api及其他能力。(比如Windows,document等对象)

6.在服务端使用绝对 URL 进行 HTTP(数据)请求

在浏览器中运行时一般都是以/api/类似这个的相对URL发送请求。而在服务端渲染中http url必选使用绝对路径,这意味着在我们使用服务端渲染是必须转化为绝对url。最新版本是用来@nguniversal/-engine包,自动配置好了,而angular8及以前的版本是需要配置的。