如何理解服务端渲染？
Rashomon511 opened this issue · 0 comments
为了帮助我们理解服务端渲染，我们可以带着以下几个疑问开始本文的阅读：什么是服务端渲染？为什么使用服务端渲染？什么情况使用服务端渲染？如何使用服务端渲染？
什么是服务器渲染
要想理解服务端渲染，首先要清楚一个渲染的概念：渲染即是数据与模版组装成html
客户端渲染(CSR)与服务端渲染(SSR)
为了更好的理解服务端渲染，我们可以将服务端渲染与客户端渲染对比着来看。
客户端渲染
前端做视图和交互，后端只提供接口数据，前端通过ajax向服务端请求数据，获取到数据后通过js生成DOM插入HTML页面，最终渲染给用户。页面代码在浏览器源代码中看不到。
客户端渲染优点：
- 使得服务器计算压力变轻
- 做到了前后端分离，在团队开发中只要负责各自的任务即可，使开发效率有明显提升。
客户端渲染缺点：
- 不利于SEO、搜索引擎爬虫看不到完整的程序源码
- 请求增多时用户等待时间变长，导致首屏渲染慢
- 消耗的是用户浏览器的性能
服务端渲染
服务端在返回html之前，在特定的区域，符号里用数据填充生成html，再发送给客户端html，客户端解析html最终渲染出页面给用户，页面代码在浏览器源代码中看得到。
服务端渲染优点：
- 响应快，用户体验好，首屏渲染快
- 对搜索引擎友好，搜索引擎爬虫可以看到完整的程序源码，有利于SEO
服务端渲染缺点：
- 增加了服务器的计算压力，消耗服务器性能
- 不容易维护，如果不使用node中间层，前后端分工不明，不能进行良好的并行开发
两种渲染对比
本质上两种渲染都是一样的，都是进行的字符串拼接生成html,两者的差别最终体现在时间消耗以及性能消耗上。
客户端在不同网络环境下进行数据请求，客户端需要经历从js加载完成到数据请求再到页面渲染这个时间段。导致了大量时间的消耗以及浏览器性能的消耗。而服务端在内网请求，数据响应快，不需要等待js代码加载，可以先请求数据再渲染可视部分然后返回给客户端，客户端再做二次渲染,这样大部分消耗的是服务端的性能。客户端页面响应时间也更快。
具体可看下面的渲染路线图：
为什么使用服务端渲染
提到为什么使用服务端渲染，首先要想到的是服务端渲染解决了什么问题。根据上文我们可以简单总结起来两点。
首屏加载快
客户端渲染下，除了加载html,还要等待js/css加载完成，之后执行js渲染出页面，这个期间用户一直在等待，而服务端只需要加载当前页面的内容，而不需要一次性加载全部的 js 文件。等待时间大大缩短，首屏加载变快。
利于SEO优化
服务端渲染出的页面有助于搜索引擎识别页面内容，有利于SEO, 所谓SEO，指的是利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名。现在的搜索引擎爬虫一般是全文分析的模式，分析内容涵盖了一个网站主要3个部分的内容:文本、多媒体(主要是图片)和外部链接，通过这些来判断网站的类型和主题。对于客户端渲染来说，搜索引擎并不能收录到 ajax 爬取数据之后然后再动态 js 渲染出来的页面。而服务端渲染的页面代码都可以在源代码中看到，这有助于搜索引擎识别。
什么情况使用服务端渲染
我们已经知道服务端渲染端两大优点就是首屏渲染和SEO优化，如果对于用户体验要求比较高的或者需要进行SEO优化的我们可以采用服务端渲染。但是不是一定要使用服务端渲染呢？答案是不一定，因为服务端渲染端成本相比客户端渲染更昂贵(服务器资源稀少而宝贵)，如果不是对用户体验或SEO要求到极致的话，我们依然可以选择客户端渲染，并在客户端渲染上解决首屏优化慢和不利于SEO的缺点。
- 处理 SEO 问题时，使用 prerender、升级搜索引擎。
- 白屏可以加 loading、Skeleton Screen 效果。
总的一句话：实际开发根据实际场景。
如何使用服务端渲染
基于react框架的服务端渲染开发推荐使用Next.js框架，Next.js 是一个轻量级的 React 服务端渲染应用框架。... 使React应用 更简单 Next.js 是一个轻量级的 React 服务端渲染应用框架。
基于vue框架的服务端渲染开发推荐使用Nuxt.js框架. Nuxt.js 是一个基于 Vue.js 的轻量级应用框架,可用来创建服务端渲染 (SSR) 应用,也可充当静态站点引擎生成静态站点应用,具有优雅的代码结构分层和热加载等特性
接下来我们来动手搭建一个基于Typescript+Ant-Design + Redux+Next.js的服务端渲染框架