脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → Vue3实现SSR

基于Vue3实现SSR(服务端渲染)功能

 更新时间：2024年11月17日 09:47:46   作者：JJCTO袁龙  
在现代网页开发中,用户体验日益成为网站成功的重要因素,从加载时间到SEO优化,越来越多的开发者开始关注使用服务端渲染（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 将会扮演更为重要的角色。

到此这篇关于基于Vue3实现SSR(服务端渲染)功能的文章就介绍到这了,更多相关Vue3实现SSR内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

最新评论