服务端渲染ssr（server side render）

guanan1230

已于 2022-05-17 14:13:12 修改

阅读量1.6k

点赞数 3

文章标签：前端服务器 javascript

于 2022-05-17 13:56:37 首次发布

本文链接：https://blog.csdn.net/guanan1230/article/details/124818985

版权

4.2 把server文件夹中的文件拷贝进来

6.1. 使用nuxt.js创建一个ssr项目

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

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

1.1 新建server文件夹

```
server
```

1.2 生成一个node项目

```bash
npm init -y
```

1.3 安装express

[express](https://www.expressjs.com.cn/) 官方文档

```bash
npm install express --save
```

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.5 运行查看效果

```bash
node app.js
```

1.6 打开浏览器

`http://localhost:3000`

1.7 右键查看源代码

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

2 - 什么是客户端渲染？

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

2.1 新建client文件夹

```
client
```

2.2 生成一个vue项目

```bash
npm init @vitejs/app client-vue-app --template vue
```

2.3 安装依赖并启动

```bash
cd vue-app
npm install (or `yarn`)
npm run dev (or `yarn dev`)
```

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

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

3.1 运行架构对比

CSR执行流程：浏览器加载html文件 -> 浏览器下载js文件 -> 浏览

最低0.47元/天解锁文章

guanan1230

关注

3
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
服务端渲染ssr（server side render）

1 - 什么是服务器端渲染？server side render 前端页面的产生是由服务器端生成的，我们就称之为服务端渲染1.1 新建server文件夹```server```1.2 生成一个node项目```bashnpm init -y```1.3 安装express[express](https://www.expressjs.com.cn/) 官方文档```bashnpm install express --save```1.4 服务端渲染小案
复制链接

扫一扫