服务端渲染ssr（server side render）

目录

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

1.1 新建server文件夹

1.2 生成一个node项目

1.3 安装express

1.4 服务端渲染小案例

1.5 运行查看效果

1.6 打开浏览器 

 1.7 右键查看源代码

2 - 什么是客户端渲染？

2.1 新建client文件夹 

2.2 生成一个vue项目 

2.3 安装依赖并启动 

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

3.1 运行架构对比 

3.2 开发模式对比 

3.3  特点优势总结 

4 - vue框架中的服务端渲染 

4.1 新建vue-ssr文件夹

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

4.3 安装必要依赖

4.4 vue服务端渲染最小demo 

 4.5 遗留问题

5 - 理解同构理念

6 - Nuxt.js框架使用 

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

6.2. 启动项目 

 6.3搭建首页

 6.4  异步数据获取

 6.4.1 认识asyncData方法

---

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(`
    
      
        hi,hello
      
    
`))

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文件 -> 浏览器运行vue代码  -> 渲染页面

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

3.2 开发模式对比 

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

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

3.3  特点优势总结 

|                                 | 客户端渲染（CSR） | 服务端渲染（SSR） |
| ------------------           | -----------------              | ----------------- |
| 首次渲染时间           | 长                                | 很短              |
| seo支持                    | 差                                | 良好              |
| 前后端分工开发效率 | 快                                | 慢                | 

4 - vue框架中的服务端渲染 

[vue ssr基础使用](https://ssr.vuejs.org/zh/guide/#%E5%AE%89%E8%A3%85)

4.1 新建vue-ssr文件夹

```
vue-ssr
```

4.2 把server文件夹中的文件拷贝进来 4.3 安装必要依赖

```bash
npm install vue vue-server-renderer --save
```

4.4 vue服务端渲染最小demo 

// app.js
const Vue = require('vue')
const server = require('express')()

const renderer = require('vue-server-renderer').createRenderer()

server.get('*', (req, res) => {
  const app = new Vue({
    data: {
      url: req.url
    },
    template: `访问的 URL 是：{{ url }}`,
  })
  renderer.renderToString(app, (err, html) => {
    if (err) throw err
    res.send(html)
  })
})

server.listen(8888,() => console.log(`Example app listening on port 8888!`))

 4.5 遗留问题

// app.js
const Vue = require('vue')
const server = require('express')()

const renderer = require('vue-server-renderer').createRenderer()

server.get('*', (req, res) => {
  const app = new Vue({
    data: {
      url: req.url
    },
    template: 
    `
      访问的 URL 是：{{ url }}
      click me!
    `,
  })
  renderer.renderToString(app, (err, html) => {
    if (err) throw err
    res.send(html)
  })
})

server.listen(8888,() => console.log(`Example app listening on port 8888!`))

运行发现，页面成功显示了button按钮，但是可惜的是，没有成功绑定事件，点击无效，事实上除了事件没有绑定之外，服务器端虽然完成了vue的渲染，但是给到客户端的时候已经成了字符串了，一系列我们熟悉的vue应用的特性，我们都无法使用，比如数据响应式更新

5 - 理解同构理念

一套vue（react）代码，在服务端执行一次，在客户端再执行一次，就是同构 

const app = new Vue({
    data: {
      url: req.url
    },
    template: 
    `
      访问的 URL 是：{{ url }}
      click me!
    `
})

上面所示的vue代码，我们在服务端的执行保持不变，只要我们把这段代码在客户端再重新执行一遍，
不就可以拥有原本vue应用的所有特性了么，确实如此，不过这个过程的难度太大，
我们现在只需要理解，所谓的同构是指：**同一套vue代码在服务端执行一次在客户端再执行一次**

1. 服务端执行完成渲染解决了首次加载速度慢的问题
2. 浏览器执行解决了绑定事件及恢复vue本身特性的问题

6 - Nuxt.js框架使用 

nuxt.js是一套使用vue框架开发应用的服务端渲染框架，提供了开箱即用的功能 

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

```bash
npm create nuxt-app <项目名>
``` 

6.2. 启动项目 

```bash
cd vue-ssr-app
npm run dev
``` 

 6.3搭建首页

// pages/index.vue

 6.4  异步数据获取

Introduction - Axios ModuleThe Axios module for Nuxthttps://axios.nuxtjs.org/

 6.4.1 认识asyncData方法

 `asyncData`方法会在组件（**限于页面组件**）每次加载之前被调用。
它可以在服务端或路由更新之前被调用，你可以利用 `asyncData`方法来获取数据，
Nuxt.js 会将 `asyncData` 返回的数据融合组件 `data` 方法返回的数据一并返回给当前组件

async asyncData ({ $axios }) {
    const url = 'http://icanhazip.com'
    const res = await $axios.$get(url)
    return {
      articleList: res
    }
  },
  data () {
    return {
      name: 'cp'
    }
  }