讨论 Vue 3 的 SSR（服务端渲染）功能以及如何实现。

最新推荐文章于 2025-01-14 13:37:04 发布

JJCTO袁龙

最新推荐文章于 2025-01-14 13:37:04 发布

阅读量1.4k

点赞数 26

分类专栏： Vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/yuanlong12178/article/details/143802830

版权

Vue 专栏收录该内容

703 篇文章

订阅专栏

深入探索 Vue 3 的服务端渲染（SSR）功能及实现

在现代网页开发中，用户体验日益成为网站成功的重要因素。从加载时间到SEO优化，越来越多的开发者开始关注使用服务端渲染（SSR）来提升应用的表现。Vue 3 在这方面提供了强有力的支持，让开发者可以轻松实现 SSR。本文将深入探讨 Vue 3 的 SSR 特性，并以示例代码展示如何实现这一功能。

什么是服务端渲染（SSR）？

简单来说，服务端渲染是一种将网页在服务器端生成 HTML 输出的技术。相比于传统的客户端渲染（CSR），SSR 能够在首次加载时提供完整的 HTML 标记，这样用户花费更少时间加载页面，并能在搜索引擎中获得更高的可见度。通过服务器直接生成并传递 HTML，SSR 还可以提高首屏渲染速度，降低用户的感知延迟。

Vue 3 的 SSR 特性

Vue 3 在 SSR 上有了显著改进与优化，将其分为两个主要部分：

Vue 3 服务器入口：这是生成 HTML 的输出，依赖于 Vue 的渲染函数。
Vue 3 客户端重 hydration：它可在用户加载页面后提升用户交互体验，通过在页面加载后将用户的交互转移至 Vue 的组件上。

如何实现 SSR

接下来，让我们一步步实施 Vue 3 的 SSR。我们将创建一个简单的 Vue 应用，并展示如何设置 SSR。

第一步：环境设置

首先，请确保你已经安装了 Node.js 和 npm。然后，我们开始创建一个新的 Vue 项目。打开终端并运行：

npm init -y
npm install vue vue-server-renderer express

第二步：创建 Vue 应用

在项目根目录下创建一个 src/ 文件夹，并在其中创建 app.js 文件：

// src/app.js
const { createSSRApp } = require('vue');

module.exports = function () {
  const app = createSSRApp({
    data: () => ({
      message: 'Hello, SSR with Vue 3!'
    }),
    template: `<div>{{ message }}</div>`
  });

  return { app };
};

这个简单的 Vue 应用返回了一条消息。在 SSR 的情况下，应用程序即将被服务器渲染，因此这是创建我们的 Vue 实例的方式。

第三步：创建服务器

接下来，我们需要创建一个服务器，以便将应用渲染成 HTML，并将其发送到客户端。在项目根目录下创建 server.js 文件：

// server.js
const express = require('express');
const { createSSRApp } = require('vue');
const { renderToString } = require('vue-server-renderer').createRenderer();
const appEntry = require('./src/app');

const server = express();

server.get('/', async (req, res) => {
  const { app } = appEntry();

  try {
    const html = await renderToString(app);
    res.send(`
      <!DOCTYPE html>
      <html lang="en">
      <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Vue 3 SSR Demo</title>
      </head>
      <body>
        <div id="app">${html}</div>
        <script src="/client.js"></script>
      </body>
      </html>
    `);
  } catch (error) {
    res.status(500).send('Server Error');
  }
});

server.listen(3000, () => {
  console.log('Server running at http://localhost:3000');
});

在这个文件中，我们创建了一个 Express 服务器，并在根路径（/）时使用 renderToString 函数将 Vue 组件渲染为 HTML。需要注意的是，这里引入的 app 是我们之前创建的 Vue 应用。

第四步：客户端重渲染

为了让 Vue 应用程序在浏览器中变得活跃，我们需要创建客户端 JavaScript 文件。在 src/ 文件夹下，创建一个新的 client.js 文件并加入以下内容：

// src/client.js
import { createSSRApp } from 'vue';
import appEntry from './app';

const { app } = appEntry();
app.mount('#app');

这个文件创建了一个相同的 Vue 应用，并把它挂载到我们在 HTML 中创建的根元素上。

第五步：测试应用

现在，我们已经完成了 Vue 3 SSR 的实现，可以启动服务并测试应用。在命令行中运行以下命令：

node server.js

打开浏览器，访问 http://localhost:3000，你将看到 “Hello, SSR with Vue 3!” 的消息显示在页面上，这个内容是由服务器渲染的。

结论

Vue 3 的服务端渲染设置相对简单，能显著提高应用性能与用户体验。我们通过一个简单的示例展示了如何设置基础的 SSR 应用，但在实际开发中，应用可能会涉及路由、状态管理等更多高级功能。

随着 Vue 3 的流行与应用场景的扩展，SSR 在提升用户体验和 SEO 方面的优势无疑使它成为开发者的首选解决方案。今后的网页开发中，SSR 将会扮演更为重要的角色。希望这篇文章能为你提供有价值的指导与帮助，助你在 Vue 3 的 SSR 旅程中一路顺畅！

最后问候亲爱的朋友们，并邀请你们阅读我的全新著作

📚 《Vue.js 3企业级项目开发实战（微课视频版》

在这里插入图片描述