面试题——简述Vue 3的服务器端渲染（SSR）是如何工作的？
面试题——简述Vue3的服务器端渲染（SSR）是如何工作的？
服务器端渲染（SSR）已经成为了一个热门话题。Vue 3，作为一款流行的前端框架，也提供了强大的SSR支持。那么，Vue 3的SSR究竟是如何工作的呢？本文将带你深入了解其工作原理，并通过案例代码进行解析。
Vue 3 SSR的基本概念
服务器端渲染（SSR）是指在服务器端生成HTML内容，并将其发送到客户端浏览器进行展示。与传统的客户端渲染（CSR）相比，SSR具有更快的首屏加载速度和更好的SEO效果。Vue 3的SSR通过一套完整的框架和工具，实现了在服务器端生成Vue组件的HTML表示，从而提高了应用的性能和可访问性。
Vue 3 SSR的工作流程
Vue 3的SSR工作流程可以分为以下几个主要步骤：
-
服务器请求：
- 当用户访问应用时，浏览器向服务器发送一个请求。
-
服务器渲染：
- 服务器接收到请求后，使用Vue的SSR框架（如
@vue/server-renderer）来渲染Vue组件。 - 在渲染过程中，服务器会执行Vue组件的生命周期钩子，生成组件的HTML表示。
- 服务器接收到请求后，使用Vue的SSR框架（如
-
HTML发送：
- 服务器将生成的HTML内容发送到客户端浏览器。
-
客户端激活：
- 浏览器接收到HTML内容后，会加载Vue的客户端脚本。
- 客户端脚本会“激活”服务器渲染的HTML，使其成为动态的Vue应用。
案例代码与解析
下面是一个简单的Vue 3 SSR案例，帮助你更好地理解其工作原理。
服务器端代码
const express = require('express');
const { createSSRApp } = require('vue');
const server = express();
const { renderToString } = require('@vue/server-renderer');
const app = createSSRApp({
data() {
return { message: 'Hello, Vue 3 SSR!' };
},
template: `<div>{{ message }}</div>`
});
server.get('*', (req, res) => {
renderToString(app).then(html => {
res.send(`
<!DOCTYPE html>
<html>
<head>
<title>Vue 3 SSR</title>
</head>
<body>
<div id="app">${html}</div>
<!-- 客户端脚本将在这里加载 -->
</body>
</html>
`);
}).catch(err => {
res.status(500).end('Internal Server Error');
console.error(err);
});
});
server.listen(8080, () => {
console.log('Server is running on http://localhost:8080');
});
客户端代码
在实际应用中，客户端代码通常会通过构建工具（如Webpack）进行打包，并包含在HTML文件的<script>标签中。为了简化示例，这里假设客户端脚本已经加载并可用。
// 客户端脚本（假设已经通过构建工具打包并加载）
import { createApp } from 'vue';
const app = createApp({
data() {
return { message: 'Hello, Vue 3 SSR!' };
},
template: `<div>{{ message }}</div>`
});
app.mount('#app');
解析
-
服务器端：
- 使用Express框架创建一个服务器。
- 使用
createSSRApp函数创建一个Vue应用实例。 - 在服务器接收到请求时，使用
renderToString函数将Vue应用渲染为字符串形式的HTML。 - 将生成的HTML内容发送到客户端浏览器。
-
客户端：
- 加载Vue的客户端脚本。
- 使用
createApp函数创建一个与服务器端相同的Vue应用实例。 - 通过
app.mount('#app')将应用挂载到服务器渲染的HTML中的#app元素上，从而“激活”应用。
通过这种方式，Vue 3实现了服务器端渲染和客户端激活的无缝衔接，提高了应用的性能和用户体验。
区别比较
服务端渲染：
客户端渲染：
以下是一个关于服务端渲染和原始客户端渲染的对比表格：
| 服务端渲染（SSR） | 原始客户端渲染（CSR） | |
|---|---|---|
| 定义 | 在服务器上预先生成页面内容，并将完整的HTML发送到客户端浏览器的渲染方式。 | 客户端（浏览器）向服务端请求页面，服务端返回简单的HTML页面和JavaScript文件，客户端使用JavaScript生成DOM并展示页面的渲染方式。 |
| 渲染过程 | 服务端处理用户请求，根据请求内容查询数据，结合HTML模板生成HTML文本，返回给浏览器端，再由浏览器解析HTML，展示页面内容。 | 客户端请求页面，服务端返回简单的HTML页面和JavaScript文件，客户端使用JavaScript生成DOM并展示页面内容。 |
| 优点 | - 初始加载速度快，用户无需等待JavaScript执行。 | - 减轻服务器压力，服务器只需提供数据。 |
| - 有利于搜索引擎优化（SEO），因为搜索引擎爬虫可以直接抓取到完整的HTML页面。 | - 前后端分离，职责明确，前端专注页面的开发，后端专注接口的开发。 | |
| - 适用于对首屏加载时间有较高要求的场景。 | - 用户体验性好，可以实现局部刷新和动态更新。 | |
| 缺点 | - 对服务器性能要求较高，因为需要服务器处理页面渲染。 | - 首屏加载时间长，因为需要等待JavaScript执行。 |
| - 开发成本高，因为需要在服务器端处理页面渲染逻辑。 | - 不利于搜索引擎优化（SEO），因为搜索引擎爬虫可能无法抓取到完整的HTML页面。 | |
| - 可能增加代码复杂性，因为需要处理服务端和客户端之间的数据同步。 | - 依赖客户端性能，低性能设备或网络条件下可能影响用户体验。 | |
| 适用场景 | - 对SEO有要求的系统，如门户首页、商品详情页面等。 | - 对SEO没有要求的系统，如后台管理类的系统，如电商后台管理、用户管理等。 |
| - 需要快速展示页面内容的场景，如新闻网站、社交媒体平台等。 | - 需要实现丰富交互和动态更新的场景，如单页面应用（SPA）。 | |
| 技术实现 | - 常见的SSR框架包括Next.js（React生态）、Nuxt.js（Vue生态）、Angular Universal（Angular生态）等。 | - 常见的前端框架包括React、Vue、Angular等。 |
| 示例 | - 电商网站的商品详情页，使用SSR技术可以快速展示商品信息，提高用户满意度。 | - 社交媒体平台，使用CSR技术可以实现动态更新和局部刷新，提高用户互动性。 |
总结：
-
**服务端渲染（SSR）**适合对首屏加载时间有较高要求、需要快速展示页面内容且对SEO有要求的场景。它通过服务器生成完整的HTML页面，减少了客户端的渲染时间，提高了用户体验和搜索引擎优化效果。然而，它对服务器性能要求较高，开发成本也相对较高。
-
**原始客户端渲染（CSR）**适合对SEO没有要求、需要实现丰富交互和动态更新的场景。它通过客户端JavaScript生成DOM并展示页面内容，减轻了服务器压力，实现了前后端分离。然而，它的首屏加载时间较长，依赖客户端性能，且不利于搜索引擎优化。
最后
Vue 3的服务器端渲染（SSR）通过一套完整的框架和工具，实现了在服务器端生成Vue组件的HTML表示，从而提高了应用的性能和可访问性。本文详细介绍了Vue 3 SSR的基本概念、工作流程，并通过案例代码进行了解析。希望这篇文章能帮助你更好地理解Vue 3的SSR工作原理，并在你的项目中加以应用。
看到这里的小伙伴，欢迎点赞、评论，收藏！
如有前端相关疑问，博主会在第一时间解答，也同样欢迎添加博主好友，共同进步！！！