什么是渲染
渲染指的是把数据+模板拼接到一起
传统服务端渲染
早期Web页面都是通过服务端渲染，服务端将数据和页面模板渲染为HTML，发送到客户端。代表性技术：ASP、PHP、JSP
image-20210322205420137.png
例子：使用nodeJs + express + art-template实现服务端渲染
使用nodeJS http模块模拟搜索引擎爬虫
image-20210323170021508.png
客户端渲染
Ajax技术可以让客户端动态获取数据，原本服务端渲染的事儿就可以在客户端做了，将数据处理和页面渲染分开，也就是后端负责处理数据，前端负责页面渲染，这种前后端分离模式极大提高开发效率和可维护性
这种模式下，有一些明显的不足，最主要的是：
- 首屏喧染慢：因为HTML没有内容，必须等到javsScript加载并执行完成后才会呈现页面内容
- SEO问题：同样因为没有HTML内容，所以对于目前的搜索引擎爬虫来说，页面没有有用的信息，自然无法提取到关键词，进行索引
image-20210323082648869.png
例子：使用vue实现客户端渲染
使用nodeJS http模块模拟搜索引擎爬虫
image-20210323172431861.png
现代化服务端渲染
React、Vue、Angular等客户端渲染前端框架，所创建的单页应用（SPA）具有用户体验好、渲染性能好、可维护性高等有点；但也存在一些缺陷：
-
首屏加载时间过长
与传统服务端渲染直接获取服务端渲染好的 HTML 不同，单页应用使用 JavaScript 在客户端生成 HTML 来呈现内容，用户需要等待客户端 JS 解析执行完成才能看到页面，这就使得首屏加载时间变长，从而影响用户体验
-
不利于SEO
单页面应用通过客户端JS解析执行后生成网页，当搜索引擎爬取网站HTML文件时，几乎没有内容
为解决上面两个缺陷，借鉴传统的服务端直出HTML方案，推出在服务端执行前端框架生成网页内容，再将渲染好的网页内容返回给客户端，客户端只负责展示即可
为了获得更好的用户体验，同时会在客户端将来自服务端渲染的内容激活为一个SPA应用，之后的页面交互都是客户端渲染，也就是说首屏渲染是服务端，之后页面交互都是客户端渲染
这种方式称为现代化服务端渲染，通过服务端渲染首屏直出，解决首屏渲染慢以及不利于SEO问题，通过客户端渲染接管页面内容交互得到更好的用户体验，也叫同构渲染，所谓的同构指的是服务端构建渲染 + 客户端构建渲染，这种方式构建的应用称之为服务端渲染应用或者是同构应用
同构应用（isomorphic web apps）：基于React、Vue框架，客户端渲染和服务端渲染的结合，在服务端执行一次用于实现服务端渲染（首屏直出），在客户端再执行一次，用于接管页面交互，核心解决SEO和首屏喧染慢的问题
image-20210323110431110.png
- 客户端发起请求
- 服务端渲染首屏内容 + 生成客户端 SPA 相关资源
- 服务端将生成的首屏资源发送给客户端
- 客户端直接展示服务端渲染好的首屏内容
- 首屏中的 SPA 相关资源执行之后会激活客户端 Vue
- 之后客户端所有的交互都由客户端 SPA 处理
服务端渲染会每次刷新页面 观察刷新按钮即可判断是否是服务端渲染
使用nodeJS http模块模拟搜索引擎爬虫
image-20210323174126661.png
服务端渲染的问题
- 开发条件有限
- 浏览器特定的代码，只能在某些生命周期钩子函数 (lifecycle hook) 中使用，以vue为例，既要在服务端渲染运行，也要在客户端渲染运行，需要对服务端渲染和客户端渲染的生命周期做区分，会带来额外操作。
- 纯浏览器运行的扩展库需要特殊处理才能在服务端运行
- 涉及构建设置和部署的更多要求，服务端渲染应用，需要部署在Node.js server 运行环境。
- 更多的服务器端负载。在 Node.js 中渲染完整的应用程序，显然会比仅仅提供静态文件的 server 更加大量占用 CPU 资源，因此如果你预料在高流量环境 (high traffic) 下使用，请准备相应的服务器负载，并明智地采用缓存策略。
在对应用程序使用服务器端渲染之前，应该考虑内容到达时间 (time-to-content) 对应用程序的重要程度。例如一个应用初始加载时的额外几百毫秒并不重要，这种情况下去使用服务器端渲染将是一个小题大作之举。然而，内容到达时间 (time-to-content) 要求是绝对关键的指标，在这种情况下，服务器端渲染可以帮助实现最佳的初始加载性能。
事实上，很多网站是出于效益的考虑才启用服务端渲染，性能倒是在其次，一般公司官网都会使用服务端渲染提升SEO能力，假设要搜索关键词“运维”。在客户端渲染模式下搜索引擎找不到此关键词，因为这个关键字是 JS 代码加载并执行完后加载到 HTML 页面中的，搜索引擎只会查找现成的内容，不会帮你跑 JS 代码，此时不得不启用服务端渲染来提升搜索引擎优化。 但性能在其次，不代表性能不重要。
网友评论