阅读 1030

如何理解服务端渲染?

为了帮助我们理解服务端渲染,我们可以带着以下几个疑问开始本文的阅读:什么是服务端渲染?为什么使用服务端渲染?什么情况使用服务端渲染?如何使用服务端渲染?

什么是服务器渲染

要想理解服务端渲染,首先要清楚一个渲染的概念:渲染即是数据与模版组装成html

客户端渲染(CSR)与服务端渲染(SSR)

为了更好的理解服务端渲染,我们可以将服务端渲染与客户端渲染对比着来看。

客户端渲染

前端做视图和交互,后端只提供接口数据,前端通过ajax向服务端请求数据,获取到数据后通过js生成DOM插入HTML页面,最终渲染给用户。页面代码在浏览器源代码中看不到。
客户端渲染优点:

  1. 使得服务器计算压力变轻
  2. 做到了前后端分离,在团队开发中只要负责各自的任务即可,使开发效率有明显提升。

客户端渲染缺点:

  1. 不利于SEO、搜索引擎爬虫看不到完整的程序源码
  2. 请求增多时用户等待时间变长,导致首屏渲染慢
  3. 消耗的是用户浏览器的性能

服务端渲染

服务端在返回html之前,在特定的区域,符号里用数据填充生成html,再发送给客户端html,客户端解析html最终渲染出页面给用户,页面代码在浏览器源代码中看得到。
服务端渲染优点:

  1. 响应快,用户体验好,首屏渲染快
  2. 对搜索引擎友好,搜索引擎爬虫可以看到完整的程序源码,有利于SEO

服务端渲染缺点:

  1. 增加了服务器的计算压力,消耗服务器性能
  2. 不容易维护,如果不使用node中间层,前后端分工不明,不能进行良好的并行开发

两种渲染对比

本质上两种渲染都是一样的,都是进行的字符串拼接生成html,两者的差别最终体现在时间消耗以及性能消耗上。
客户端在不同网络环境下进行数据请求,客户端需要经历从js加载完成到数据请求再到页面渲染这个时间段。导致了大量时间的消耗以及浏览器性能的消耗。而服务端在内网请求,数据响应快,不需要等待js代码加载,可以先请求数据再渲染可视部分然后返回给客户端,客户端再做二次渲染,这样大部分消耗的是服务端的性能。客户端页面响应时间也更快。
具体可看下面的渲染路线图:

image.png

为什么使用服务端渲染

提到为什么使用服务端渲染,首先要想到的是服务端渲染解决了什么问题。根据上文我们可以简单总结起来两点。

首屏加载快

客户端渲染下,除了加载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的服务端渲染框架

参考链接

服务器端渲染和客户端渲染的区别
服务端渲染(SSR)

最后

原文在这里:gitHub 如有遗漏,还请指正!!

如果觉得对您有帮助!请别忘记点个赞或者关注哦您的关注将是我前进的动力!!冲鸭!!!

banner.png

「无畏前端」不定时更新社区优秀技术文章!

关注下面的标签,发现更多相似文章
评论