服务端渲染 ​

一. 服务端渲染（ssr） ​

服务端渲染是指HTML页面是在服务端渲染的

当我们访问一个HTML页面的时候，服务端会将完整的页面返回给客户端

优点：

• 更快的首页渲染：完整的页面不会有其他的请求，只需要浏览器渲染
• 更好的SEO

缺点：

• 更多的资源消耗：服务器不仅要处理数据，而且要负责页面的渲染
• 前后端代码耦合，不好维护
• 前端没有足够发挥空间
• 用户体验一般：每个页面都需要刷新

二. 客户端渲染(csr) ​

Vue、React就是常见的客户端渲染框架

当我们访问一个HTML页面的时候，服务端不会返回完整的页面，而返回一个‘空’的页面

将页面返回给客户端之后，浏览器通过请求、执行页面的js文件，然后再向服务器请求数据， 然后才渲染出页面

优点：

• 减小服务端压力
• 首页渲染慢：需要加载、执行脚本和请求数据
• 前后端分离

缺点：

• 首页渲染慢：需要加载、执行脚本和请求数据
• SEO困难

三. 同构渲染 ​

同构渲染结合服务端渲染和客户端渲染的优点

• 页面首页采用服务端渲染：解决客户端渲染首页加载慢和SEO困难的问题

• 页面的交互采用客户端渲染：解决服务端压力大、前后端代码耦合、用户体验差的问题

同构渲染框架：nuxt，next

缺点：

• 不能再服务端渲染期间操作dom
• 某些代码需要区分运行环境
• 需要构建服务端和客户端
• 只能部署再nodejs服务器上

四. 静态站点生成(ssg) ​

构建时预渲染 html 导出纯静态文件

比如：Hexo

五. 增量静态渲染（isr） ​

增量再渲染的概念，其实是基于 SSG 场景下的混合版 SSR