这是我参与「第五届青训营 」笔记创作活动的第7天
一、重点内容介绍：
这篇文章的起因是：课程大项目的标题，基于SSR渲染的仿掘金网站，所以了解一下SSR是什么。
1、服务端渲染SSR
2、客户端渲染CSR
3、两种渲染对比
二、详细知识点
1、服务端渲染 SSR（重点）
服务端渲染 SSR
- 页面上的内容是通过服务端渲染生成的，浏览器直接显示服务端返回的html就可以了。
服务端渲染优点：
- 响应快，用户体验好，首屏渲染快
- 对搜索引擎友好，搜索引擎爬虫可以看到完整的程序源码，有利于SEO
服务端渲染缺点：
- 增加了服务器的计算压力，消耗服务器性能
- 不容易维护，如果不使用node中间层，前后端分工不明，不能进行良好的并行开发
如何使用SSR来渲染
- 基于react框架的服务端渲染开发：
使用Next.js框架，Next.js 是一个轻量级的 React 服务端渲染应用框架。 - 基于vue框架的服务端渲染开发：
使用Nuxt.js框架. Nuxt.js 可用来创建服务端渲染 (SSR) 应用,也可充当静态站点引擎生成静态站点应用。
2、客户端渲染 CSR
客户端渲染 CSR
- 页面上的内容是我们加载的js文件渲染出来的，js文件运行在浏览器上面，服务端只返回一个html模板。
客户端渲染优点：
- 使得服务器计算压力变轻
- 做到了前后端分离，在团队开发中只要负责各自的任务，使开发效率有明显提升。
客户端渲染缺点：
- 请求增多时用户等待时间变长，导致首屏渲染慢
- 不利于SEO、搜索引擎爬虫看不到完整的程序源码
- 消耗的是用户浏览器的性能
3、两种渲染对比
两种渲染本质上是一样的，都是进行的字符串拼接生成html
两者的差别最终体现在时间消耗以及性能消耗上
- 客户端在不同网络环境下进行数据请求，客户端需要经历从js加载完成到数据请求再到页面渲染这个时间段。导致了大量时间的消耗以及浏览器性能的消耗。
- 而服务端在内网请求，数据响应快，不需要等待js代码加载，可以先请求数据再渲染可视部分然后返回给客户端，客户端再做二次渲染,这样大部分消耗的是服务端的性能。客户端页面响应时间也更快。
小结
今天是没有课的一天，我开始了大项目的准备。
去学习和了解了服务端渲染SSR是什么样的东西，为之后的基于SSR开发的仿掘金项目打基础。
