13.1 CSR、SSR 以及同构渲染

1.ssr传统服务端渲染

传统的服务端渲染有:asp、jsp、ejs等，服务端语言往往通过这些模板引擎将数据和dom在服务 端渲染完成，返回一个完整的静态html页面给客户端，由客户端直接显示。 参考：爱此迎-全球大型房屋租赁平台

1.原理

1. 客户端发送http请求
2. 服务端响应http请求，返回拼接好的html字符串给客户端
3. 客户端渲染html

2.缺点

1. 前后端分离，不好维护
2. 用户体验不佳，需要重新加载页面
3. 服务端压力大

2.csr 客户端渲染

在现代化的前端项目中，客户端渲染的代表性技术栈是vue、react、anqular，我们常常使用它们来构建客户端单页或者多页应用程序。以SPA构建程序为例，在览器端首先染的是一套空的html，通过JS直接进行页面的渲染和路由跳转等操作，所有的数据通过aiax请求从服务器获取后，在进行客户端的拼装和展示。 参考：飞书

1.原理

1.客户端发起http请求
2.服务端响应http请求，返回一个空的 html文件
3.客户端初始化时加载必须的js文件，请求接口
4.将生成的dom插入到html中

2.缺点

1. 首屏加载慢
2. 不利于SEO

3.同构 现代服务端渲染

Vue、React的SSR方案实际上就是同构渲染，我们现在讲的服务端染概念，是指在前端范畴或 者说在vue、react等单页面技术栈范畴内，基于Node.js server运行环境的服务端渲染方案，通过在 Node.js 中运行相同应用程序的前端框架(例如 React、Vue等)，将其预渲染成 HTML，最后在客户端进行注水化处理。简单来讲，就是应用程序的大部分代码在服务器(node服务端)和 客户端上运行，这就是所谓的现代服务端渲染:同构。 参考：美团

1.原理

1.客户端发起http请求
2.服务端渲染把 Vue 实例转换成了静态的 html发送给客户端
3.客户端渲染是需要把事件、响应式特性等 Vue 的特性都绑回去

2.缺点

1. 服务器压力大
2. 涉及构建设置和部署的更多要求
3. 一些三方库可能需要特殊处理

3.优点

1. 首屏速度快
2. 前后端分离
3. 利于SEO
4. 有一些现成框架:Nuxt.js、Next.js