如何理解服务端渲染？

为了帮助咱们理解服务端渲染，咱们能够带着如下几个疑问开始本文的阅读：什么是服务端渲染？为何使用服务端渲染？什么状况使用服务端渲染？如何使用服务端渲染？

什么是服务器渲染

要想理解服务端渲染，首先要清楚一个渲染的概念：渲染便是数据与模版组装成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代码加载，能够先请求数据再渲染可视部分而后返回给客户端，客户端再作二次渲染,这样大部分消耗的是服务端的性能。客户端页面响应时间也更快。
具体可看下面的渲染路线图：

为何使用服务端渲染

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

首屏加载快

客户端渲染下，除了加载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 若有遗漏，还请指正！！

若是以为对您有帮助！请别忘记点个赞或者关注哦！您的关注将是我前进的动力！！冲鸭！！！

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