1、SSR服务端渲染

SSR（Server-Side Rendering），意为服务端渲染，DOM树在服务端生成，然后返回给前端。指由服务侧完成页面的 HTML 结构拼接的页面处理技术，发送到浏览器，然后为其绑定状态与事件，成为完全可交互页面的过程；

SSR优点：

更好的 SEO：搜索引擎优先爬取页面HTML结构，使用ssr时，服务端已经生成了和业务想关联的HTML，有利于seo。

更快的内容到达时间 (time-to-content)：特别是对于缓慢的网络情况或运行缓慢的设备，用户无需等待页面所有js加载完成就可以看到页面视图（压力来到了服务器，所以需要权衡哪些用服务端渲染，哪些交给客户端）

SSR缺点：

整个项目的复杂度，性能会受到影响；服务器负载变大；每次页面跳转都需要重新加载，体验不佳；不利于前后端分离，开发效率降低。

2、CSR客户端渲染

CSR（Client Side Rendering）客户端渲染，前端去后端取数据生成DOM树。

我们开发的SPA页面通常依赖的就是客户端渲染； 随着单页应用（SPA）的流行而流行，比较适合不强调SEO的中后台富交互应用；  首次页面加载要等到资源都加载执行完，用户才可以进行操作；

CSR缺点：不利于SEO; 前端响应速度慢，特别是首屏，首次页面加载要等到资源都加载执行完，用户才可以进行操作；

CSR优点：前后端分离，开发效率高；用户体验更好，我们将网站做成SPA（单页面应用）或者部分内容做成SPA，当用户点击时，不会形成频繁的跳转，用户体验丝滑。

3、服务端和客户端渲染的区别

1、二者本质的区别：是谁来完成了html的完整拼接，服务端渲染是在服务端生成DOM树，客户端渲染是在客户端生成DOM树。

2、响应速度：服务端渲染会加快页面的响应速度，客户端渲染页面的响应速度慢。

3、SEO优化：服务端渲染因为是多个页面，更有利于爬虫爬取信息，客户端渲染不利于SEO优化。

4、开发效率：服务端渲染逻辑分离的不好，不利于前后端分离，开发效率低，客户端渲染是采用前后端分离的方式开发，效率更高，也是大部分业务采取的渲染方式。

直观的区分服务端渲染和客户端渲染：

源码里如果能找到前端页面中的内容文字，那就是在服务端构建的DOM，就是服务端渲染，反之是客户端渲染。

4、业务场景选择

根据业务场景去选择渲染的方式是使用服务端渲染还是客户端渲染

如果是企业级网站，主要功能是页面展示，它没有复杂的交互，并且需要良好的SEO，那我们应该使用服务端渲染。

如果是后台管理页面，交互性很强，它不需要考虑到SEO，那我们应该使用客户端渲染。

具体使用哪种渲染方式也不是绝对的，现在很多网站使用服务端渲染和客户端渲染结合的方式：首屏使用服务端渲染，其他页面使用客户端渲染。这样可以保证首屏的加载速度，也完成了前后端分离。

服务端渲染和客户端渲染的区别_@进行中的博客-CSDN博客

# 服务器 # 前端 # javascript
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue