最新了解 Vue SSR 这一篇足以(1)，阿里前端面试题

自学几个月前端，为什么感觉什么都没学到？？

---

这种现象在很多的初学者和自学前端的同学中是比较的常见的。

因为自学走的弯路是比较的多的，会踩很多的坑，学习的过程中是比较的迷茫的。

最重要的是，在学习的过程中，不知道每个部分该学哪些知识点，学到什么程度才算好，学了能做什么。

很多自学的朋友往往都是自己去找资料学习的，资料上有的或许就学到了，资料上没有的或许就没有学到。

这就会给人一个错误的信息就是，我把资料上的学完了，估计也-就差不多的了。

但是真的是这样的吗？非也，因为很多人找的资料就是很基础的。学完了也就是掌握一点基础的东西。分享给你一份前端分析路线，你可以参考。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

还有很多的同学在学习的过程中一味的追求学的速度，很快速的刷视频，写了后面忘了前面，最后什么都没有学到，什么都知道，但是什么都不懂，要具体说，也说不出个所以然。

所以学习编程一定要注重实践操作，练习敲代码的时间一定要多余看视频的时间。

• 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 浏览器访问

• 4.6 查看源代码

• 4.7 遗留问题

• 5 - 理解同构理念

• 6 - Nuxt.js框架使用

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

• 2. 启动项目

• 3. 查看源代码

• 4. 搭建首页

• 5. 异步数据获取

• • 1. 认识asyncData方法

• 2. 获取文章列表（移动端项目）

• 3. 渲染接口数据

• 4. 预览效果并查看源代码

• 7- 总结

• • 7.1 服务端渲染和客户端渲染各自指什么？有什么特点？

• 7.2 同构的本质是什么？

• 7.3 Nuxt.js中如何实现异步数据获取（asyncData方法）？

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

---

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

1.1 新建server文件夹

server

1.2 生成一个node项目

npm init -y

1.3 安装express

express 官方文档

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

node app.js

1.6 打开浏览器

http://localhost:3000

1.7 右键查看源代码

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

2 - 什么是客户端渲染？

---

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

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

2.1 新建client文件夹

client

2.2 生成一个vue项目

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

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

2.3 安装依赖并启动

cd vue-app

npm install (or yarn)

npm run dev (or yarn dev)

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） |

| — | — | — |

| 首次渲染时间 | 长 | 很短 |

| seo支持 | 差 | 良好 |

| 前后端分工开发效率 | 快 | 慢 |

思考：如果我们的项目既想要使用vue高效率的开发项目，同时还想要首屏渲染时间很短，那该怎么办？

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

---

为了解决第3章节提出的问题，目前我们的vue组件都是在浏览器侧通过js渲染出来的，所以首次加载时间很慢，那么我们把vue组件交给服务端负责渲染，渲染为完整内容之后直接返给客户端，是不是就可以可以解决既想渲染快，还想继续使用vue进行开发的问题了？

vue ssr基础使用

4.1 新建vue-ssr文件夹

vue-ssr

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

4.3 安装必要依赖

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 err

res.send(html)

})

})

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

4.5 浏览器访问

http://localhost:8888

4.6 查看源代码

结论：我们通过在服务器端渲染vue组件的方式，让网页中又有了完整的内容，这样我们就可以既使用了vue开发又节省了首次渲染时间

4.7 遗留问题

修改app.js，添加一个button元素并使用vue的方式绑定click事件

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

<button @click=“alert(‘123’)”>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({

React

• 介绍一下react

• React单项数据流

• react生命周期函数和react组件的生命周期

• react和Vue的原理，区别，亮点，作用

• reactJs的组件交流

• 有了解过react的虚拟DOM吗，虚拟DOM是怎么对比的呢

• 项目里用到了react，为什么要选择react，react有哪些好处

• 怎么获取真正的dom

• 选择react的原因

• react的生命周期函数

• setState之后的流程

• react高阶组件知道吗？

• React的jsx，函数式编程

• react的组件是通过什么去判断是否刷新的

• 如何配置React-Router

• 路由的动态加载模块

• Redux中间件是什么东西，接受几个参数

• redux请求中间件如何处理并发

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】