人工智能uu

这个屌丝很懒，什么也没留下！

热门标签

Vue进阶篇三服务器端渲染同构的本质、 SSR 和 CSR_如何手写实现一个vue3的同构渲染

作者：人工智能uu | 2024-06-24 06:33:01

踩

如何手写实现一个vue3的同构渲染

1 - 什么是服务器端渲染？

server side render 前端页面的产生是由服务器端生成的，我们就称之为服务端渲染

1.1 新建server文件夹

server
1

1.2 生成一个node项目

npm init -y
1

1.3 安装express

express 官方文档

npm install express --save
1

1.4 服务端渲染小案例

app.js

const express = require('express')
const app = express()
const port = 3000
// 当路径为跟路径,返回完整的html片段
app.get('/', (req, res) => res.send(`
    <html>
      <body>
        <h1>hi,hello</h1>
      </body>
    </html>
`))

app.listen(port, () => console.log(`Example app listening on port ${
     port}!`))
1
2
3
4
5
6
7
8
9
10
11
12
13
14

1.5 运行查看效果

node app.js
1

1.6 打开浏览器

http://localhost:3000

1.7 右键查看源代码

总结：所谓的服务端渲染值得是页面的内容完全是由服务端侧决定到底要展示出什么内容

2 - 什么是客户端渲染？

client side render 服务端只提供json格式的数据，渲染成什么样子由客户端通过js控制

通过vite快速创建一个基于vue框架的客户端渲染样例

2.1 新建client文件夹

client
1

2.2 生成一个vue项目

我们使用vite工具快速生成一个vue项目，https://vitejs.dev/

npm init @vitejs/app client-vue-app --template vue
1

2.3 安装依赖并启动

cd vue-app
npm install (or `yarn`)
npm run dev (or `yarn dev`)
1
2
3

2.4 浏览器查看效果

http://localhost:8080

2.5 查看源代码

结论：通过查看源代码我们发现，源代码并没有显示我们页面中实际渲染的内容，我们只看到一个main.js文件，和一个id为app的根元素，所以我们知道网页内容是通过js来动态的进行渲染的，js运行在浏览器，浏览器也就是客户端，这种由浏览器端的js做主导渲染网页内容的方式，我们就称之为客户端渲染

思考题：如何得知一个网站是哪种方式的渲染？

3 - 客户端渲染vs服务端渲染

客户端渲染我们叫做CSR渲染方式，服务端渲染我们叫做SSR渲染

3.1 运行架构对比

说明

CSR执行流程：浏览器加载html文件 -> 浏览器下载js文件 -> 浏览器运行vue代码 -> 渲染页面

SSR执行流程：浏览器加载html文件 -> 服务端装填好内容 -> 返回浏览器渲染

3.2 开发模式对比

CSR：前后端通过接口JSON数据进行通信，各自开发互不影响

SSR：前后端分工搭配复杂，前端需要写好html模板交给后端，后端装填模板内容返给浏览器

3.3 特点优势总结

	客户端渲染（CSR）	服务端渲染（SSR）
首次渲染时间	长	很短
se

声明：本文内容由网友自发贡献，转载请注明出处：【wpsshop】

Vue进阶篇三 服务器端渲染 同构的本质、 SSR 和 CSR_如何手写实现一个vue3的同构渲染