页面渲染历史

服务端框架模板渲染 -> 客户端渲染 -> 服务端同构渲染(Server Side Render) -> Serverless Side Render

服务端框架模板渲染

以公司项目的java的webx为例。

webx技术

一个webx模板代码

<div>
    <div>$!title</div>
    #if($!condition == true)
        <div>$!content</div>
    #end
    <ul>
    #foreach ($!item in $! list)
        <li>$!item</li>
    #end
    </ul>
</div>

• 渲染过程

  
  java模板渲染过程

缺点：
耦合太黏。
前后端不分离。

1. 耦合了html代码和volicity语法。
2. 页面渲染耦合了后端项目启动。
   难以mock数据，代码维护成本高。

客户端渲染

前后端分离，基于ajax获取后端数据，基于history.pushState管理页面路由，基于vdom提高渲染效率。
常用解决方案是Angular，React全家桶，Vue全家桶。

使用CSR（Client Side Render）产生的问题

1. SEO差
   指大部分搜索引擎只会从 HTML 中抓取数据，导致前端渲染的页面无法被抓取。

2. 首屏性能差
   指客户端渲染常使用的 SPA 会把所有 JS 整体打包，无法忽视的问题就是文件太大，导致渲染前等待很长时间。
   也就是常说的白屏。

使用SSR（Server Side Render）解决的问题

1. 提高SEO（搜索引擎优化）
2. 提高首屏性能。

SSR服务端同构渲染

什么是同构？

一套代码运行在Node服务端又运行在客户端。
为什么可以实现一套代码运行在服务端又运行在客户端，因为虚拟dom。
首先JS天然可以双端执行，而DOM本来存在于浏览器环境。直到虚拟DOM的出现使得DOM操作可以双端执行。

React 中实现 SSR 技术的执行流程

image.png

SSR需解决的基本问题

1. Node环境加载前端组件
   webpack只打包前端组件，用户请求时通过renderToStream方法，把现有的jsx文件转化为html字符串输出。
   本质还是通过react-dom/server的renderToStream方法。

2. 生产环境环境部署
   传统的CSR页面发布我只需改下引用的静态资源版本号，
   再在发布平台中更新CDN中html文件的内容就即可生效。

Node端请求配置中心获取前端文件的版本号，根据版本号从CDN拿对应的JS Bundle（也就是web文件夹的内容）。然后继进行页面渲染。

其它问题

组件数据获取
路由问题（路由分割延迟加载）
降级为客户端渲染

Serverless Side Render

组件即函数，页面即函数，请求即函数。
定义好路由对应的函数即可。

思考

1. SEO差
2. 首屏性能差
   这两个问题解决一定要用SSR服务端渲染方案吗？

SEO优化方案：首页骨架生成页面静态化+搜索引擎爬虫可解析js能力提升。
首屏性能优化方案：分拆打包+页面切换加上loading交互效果。

参考

https://github.com/ykfe/egg-react-ssr/wiki/2020-NodeParty-%E5%88%86%E4%BA%AB
https://juejin.im/post/5bc7ea48e51d450e46289eab
https://www.yuque.com/ant-h5/learning/uxxdz5

前端为什么要关注 Serverless? - i5ting的回答 - 知乎
https://www.zhihu.com/question/378776917/answer/1075502245