vue专栏 01.vue基础 02.服务端渲染

全栈开发

已于 2022-04-03 11:23:10 修改

阅读量251

点赞数

分类专栏： vue 文章标签： vue.js

于 2022-03-18 18:27:19 首次发布

本文链接：https://blog.csdn.net/m0_66351881/article/details/123581804

版权

vue 专栏收录该内容

69 篇文章 2 订阅

订阅专栏

本文探讨了服务端渲染的发展历程，从最初的纯服务端渲染到前后端分离，再到同构开发的演变。同构开发允许代码在服务端和客户端共享，提高页面加载速度，优化SEO，并提供更好的降级方案。对比了客户端渲染(CSR)与服务端渲染(SSR)的原理和优缺点，强调了SSR在搜索引擎友好性和首屏加载速度上的优势。

摘要由CSDN通过智能技术生成

# 01.服务端渲染

[toc]{type: "ol", level: [3,4]}

### 同构开发
- 前后端异构
> 原生 JS 获取 DOM 绑定事件 的服务端渲染方式
- 同构渲染
> 组件可以在服务端运行，生成html，
> 再由客户端**Vue/React**{style="color:goldenrod"}接管从服务端吐出的html，
> 使其变为由客户端**Vue/React**{style="color:goldenrod"}管理的动态DOM。


### 演变过程
#### 纯服务端渲染
> 最初的Java、PHP时代的纯服务端渲染时代
#### 前后端分离
> 使用JavaScript运行在客户端
> 通过请求获取服务端接口数据
> 借助如 JQuery、React、Vue 等前端框架操作或生成页面DOM
- 优势
> 充分利用客户端资源，减少服务端压力
> 前后端分工明确，

#### 同构开发
- 概念
> 如 Next.js、Nuxt.js 等框架以及 ssr 框架
> 提供了不同的适用场景和开发方式
> 但目的都是为了同一套代码能同时应用于服务端和客户端
- 优点
> 服务端和客户端共用代码
> 更快的页面内容到达时间
> 更友好的SEO
> 更优雅的降级方式，更健壮的应用


### CSR与SSR区别
#### CSR
- 原理
> 通过vue等前端框架，将数据注入到body内部
> 减轻服务端压力
> 搜索引擎无法爬取到
#### SSR
- 原理
> 后端将渲染好的数据，返还给vue，此时已经带有了数据
> 服务端压力较大
> 搜索引擎可以爬取到