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(`<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文件 -> 浏览器运行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: `<div>访问的 URL 是：{{ url }}</div>`,})renderer.renderToString(app, (err, html) => {if (err) throw errres.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: `<div>访问的 URL 是：{{ url }}<button @click="alert('123')">click me!</button></div>`,})renderer.renderToString(app, (err, html) => {if (err) throw errres.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: `<div>访问的 URL 是：{{ url }}<button @click="alert('123')">click me!</button></div>`
})

上面所示的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
<template><div class="container"><Logo /><div class="articleList"><el-collapse><el-collapse-item title="一致性 Consistency" name="1"><div>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div></el-collapse-item></el-collapse></div></div>
</template><script>
export default {}
</script><style>
.container{padding:0 200px;
}
.articleList{margin-top:30px;
}
</style>

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'}}

服务端渲染ssr（server side render）相关推荐

React + Koa 实现服务端渲染(SSR)
⚛️React是目前前端社区最流行的UI库之一,它的基于组件化的开发方式极大地提升了前端开发体验,React通过拆分一个大的应用至一个个小的组件,来使得我们的代码更加的可被重用,以及获得更好的可维护性 ...
服务端渲染SSR的理解
服务端渲染SSR的理解 SSR服务端渲染Server Side Render就是当进行请求时,页面上的内容是通过服务端渲染生成的,浏览器直接显示服务端返回的HTML即可. 客户端渲染CSR 通常在构建 ...
服务端渲染(SSR) 通用技术解决方案
项目背景服务端渲染(SSR) 通用技术解决方案的诞生来源于对 360搜索百科移动端项目的一次重构实践.而当时决定重构该项目的主要原因有以下几点: 1. 技术栈陈旧,熟悉.开发以及维护成本都较高项 ...
服务端渲染SSR与客户端渲染
文章目录一.服务端渲染和客户端渲染的区别服务端渲染(SSR -- server side render) 客户端渲染二.使用服务端渲染(SSR)的利弊优势局限三.实际应用应用原则举例 ...
vue服务端渲染ssr
vue服务端渲染ssr 一.SSR概念传统web渲染技术 SPA SSR 二.webpack+vue2的实现方式 1.创建工程 2.安装依赖 3.编写一个简单的SSR 4.完整的ssr 5.代码链接 ...
node+ejs实现服务端渲染SSR
一.服务端渲染SSR 1.什么是客户端渲染和服务端渲染? 客户端渲染:客户端向服务端请求HTML页面,后端不返回完整的 HTML页面,浏览器解析HTML页面过程中如果遇到ajax数据请求,会向服务端请 ...
服务端渲染(SSR)和Nuxt.js
服务端渲染(SSR) 客户端渲染和传统服务端渲染的问题 SPA应用有两个非常明显的问题: 首屏渲染慢不利于 SEO 传统的服务端渲染又存在: 应用的前后端部分完全耦合在一起,在前后端协同开发方面会有 ...
ssr Android简书,react服务端渲染ssr
Next.js 一个轻量级的 React 服务端渲染框架 1 概念 SPA single page application : 单页面应用程序缺点:首屏加载慢,不利于SEO SSR Server-s ...
vue服务端转html,普通vue-cli初始项目转为服务端渲染SSR
1.第一步没啥好说的,利用vue-cli脚手架创建一个demo项目: vue init webpack vue-ssr-demo cd vue-ssr-demo npm install 2.安装SSR ...

服务端渲染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方法

服务端渲染ssr（server side render）相关推荐

最新文章

热门文章