Vue3项目之SSR/CSR以及同构渲染的区别

SSR/CSR以及同构渲染的区别

（一） SSR （传统服务端渲染）

传统的服务端渲染有： asp 、 jsp 、 ejs 等，服务端语言往往通过这些模板引擎将数据和 dom 在服务端渲染完成，返回一个完整的静态 html 页面给客户端，由客户端直接显示

原理：

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

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

（二）CSR（客户端渲染）

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

原理：

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

缺点：首屏加载慢，不利于 SEO

（三）同构（现代服务端渲染）

Vue 、 React + SSR 方案实际上就是同构渲染，我们现在讲的服务端渲染概念，是指在前端范畴或者说在 vue 、 react 等单页面技术栈范畴内，基于 Node.js server 运行环境的服务端渲染方案，通过在 Node . js 中运行相同应用程序的前端框架（例如 React 、 Vue 等），将其预渲染成 HTML ，最后在客户端进行注水化处理。

简单来讲，就是应用程序的大部分代码在服务器（Node 服务端）和客户端上运行，这就是所谓的现代服务端渲染

原理：

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

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

优点：首屏速度快，前后端分离，利于 SEO ，有一些现成框架：Nuxt.js、Next.js