Angular 预渲染实践

[JserMaster]

预渲染理解
客户端在接收html文件之前，服务端将html标签占位做动态数据填充；服务端处理好一个html字符串文件生成一个静态的html页面文件返回给客户端，客户端即会解析html，渲染呈现出UI/UX；

特性：
1、访问加载速度比其它任意方式几乎都快；
2、利于搜索引擎抓取，方便网站SEO
3、单个静态页只分配特定的路由
4、不用执行Javascript
5、chrome中访问后，当前页右键【查看网页源代码】，对应页面内容都可在源代码中查看
6、资源只单次渲染，无任何异步加载


为深入了解，我们以prerender项目为步骤实例，从框架搭建到打包发布；

一、构建生成Angular工程环境
首先参照Angular中文文档 搭建环境 指南，生成一个Angular项目，

Angular CLI 工具[/color]搭建你的 Angular 开发环境；
此环境下的ng项目只可打包发布成异步请求下的静态资源，只需要往某个服务中一丢即可直接访问；
例如 放到 nginx中html目录下，或放到IIS服务指定网站目录下。
一般类型的管理类网站通常采用这种做法，重心点在于使用操作管理上；


二、生成Angular服务端渲染工程

*步骤一完成后，请一定要先 yarn install ，将依赖包安装；

在服务端渲染指南中，我们参照指南执行命令
ng add @nguniversal/express-engine
执行完该命令后，项目结构中会多了几个有关于服务端渲染的文件与配置，在此不做比
对以及文件细节说明；指南中有做详细讲解；

左侧工程目录结构为服务端渲染
SSR简单理解即为组件或页面通过服务器生成html字符串，再发送到浏览器，客户端解析html；

预渲染构建方式与SSR构建方式到目前为止都基本保持一样；

预渲染生成的html，也需要通过node后台服务进行加工处理；最明显的区别为：
SSR是本在客户端渲染的过程由服务端代为处理了，然后由服务端渲染完成返回渲染后的页面(html字符串),
预渲染是服务端未有任何渲染，直接返回完整的html页面；


三、预渲染配置与构建
在当前PreRender项目工程中，打开 angular.json 配置文件，在文件中找到 prerender构建器，会发现有一个 “routes“ 配置项，如下图所示：
./angular.json

在红色框中配置不同的路由，当构建时也将会打出各路由下的html文件包；
如果要渲染生成非常多的静态页面，可以去掉 “routes” 配置项，使用 “routeFile” 配置项，该配置项可配置一个相对url路径，在url所指向的文件(js/txt/json…)中配置的路由都是打包构建的预定义路由，配置如下图所示：
./pre-routes.txt


./angular.json


以上配置OK，我们来打包运行，执行命令： yarn prerender
在打包构建成功后我们可以看到执行结果信息，如下图所示：

在结果信息中我们可以看到生成了三个不同的html文件，分别对应于所配置的访问路由路径；接下来打开dist目录，如下图所示：

可以一一找到配置所打包的各html。
在 ./dist/app/browser/ 目录是我们打好的静态资源文件，可以直接访问不同的html，从而显示不同的界面效果；
下面我们启动node服务，该服务所在目录为 ./dist/app/server/ ,执行命令：
yarn serve:ssr

Tip：也可将browser下的所有资源放到nginx/apache/IIS/tomcat... 进行访问
另外 .Net Core引擎也可以在服务器上跑Angular的应用，进行服务端渲染，该特性由ng团队在.net core上做的集成


四、访问分析预渲染页面
在node服务启动好之后，在浏览器中访问 http://localhost:4000
右键源码中查看，如下图所示：


红色框中内容是直接获取而来，非异步加载访问插入；


预渲染参照如下流程图：


注解：
1、 服务端存放了打包好的静态资源与文件（./dist/browser下的所有文件）。
2、 浏览器解析渲染返回的html内容。
3、 打包好的bundle.js / chunk.js

五、不需要的预渲染情况
1、生成针对特定路由的静态HTML 文件，可以是一个项目工程，也可以是一个CDN服务；所以预渲染不适合动态路由的页面项目；
2、如果页面中有动态的操作，以及频繁的数据变动，就不得不经常升级/发布页面，对运维以及开发维护不友好；不建议使用预渲染
3、Pre-render几乎涵盖了SSR的所有优点，但如果是一个复杂操作功能的项目，且还有N多个页面，那么预渲染在开发维护阶段将会变得异常艰难，因为它生成的是一个个对应的html页面，即有N多个路由，所以在它开发构建之时编译将会变得异常缓慢；

PreRender项目是一个对外推广实时活动页面，需要SEO，同时项目需求页少，无任何复杂交互逻辑，所以预渲染方案是它的首选；


总结
PreRender采用预渲染的方案最大的利处在两方面：
1、 网页访问速度极快！
2、 非常利于SEO引擎；已被百度与Google收录，如下图：


快照生成时间为19号发布后的第二天早晨

相关关键字 （编译构建时对于预渲染或ssr的错误排查）

预 (ahead-of-time, AOT) 编译
Angular 的预先（AOT）编译器可以在编译期间把 Angular 的 HTML 代码和 TypeScript 代码转换成高效的 JavaScript 代码，这样浏览器就可以直接下载并运行它们。 对于产品环境，这是最好的编译模式，相对于即时 (JIT) 编译而言，它能减小加载时间，并提高性能。
使用命令行工具 ngc 来编译你的应用之后，就可以直接启动一个模块工厂，这意味着你不必再在 JavaScript 打包文件中包含 Angular 编译器。

PreRender在Github样例地址

ngcc
Angular 兼容性编译器。如果使用 Ivy 构建应用程序，但依赖未用 Ivy 编译的库，则 CLI 将使用 ngcc 自动更新依赖库以使用 Ivy。

[hookee]