直白表达，简单易学：Vue SSR 精简教程

2024-02-02 12:34:59

服务端渲染的基本原理

当您在浏览器中访问传统的单页面应用时，需要先加载 HTML、JavaScript 和 CSS 等资源，然后由浏览器解析 HTML 并执行 JavaScript 来构建页面。这种方式称为客户端渲染，因为渲染过程完全在客户端完成。

服务端渲染则是在服务器上提前将应用程序渲染成 HTML，然后将完整的 HTML 文档发送给浏览器。浏览器收到 HTML 文档后，无需再执行 JavaScript 来构建页面，只需解析 HTML 并显示即可。这可以有效减少首次加载时间，提高初始加载速度。

Vue SSR 的实现

我们可以使用 Vue.js 官方提供的 @vue/server-renderer 包来实现服务端渲染。该包提供了将 Vue 组件渲染成 HTML 的 API，使您能够在服务器端预先渲染页面。

首先，您需要在项目中安装 @vue/server-renderer 包：

npm install --save @vue/server-renderer

然后，您可以创建一个新的 Vue 项目，并在其中添加一个简单的组件，如下所示：

// App.vue
<template>
  <div>
    <h1>Hello, World!</h1>
  </div>
</template>

<script>
export default {
  name: 'App'
};
</script>

接下来，您需要创建一个服务器端渲染入口文件，该文件用于将 Vue 组件渲染成 HTML。您可以使用 Node.js 作为服务器端的运行环境，并使用 Express 框架来构建 HTTP 服务器。

在服务器端渲染入口文件中，您需要引入必要的 Vue.js 库和 @vue/server-renderer 包，并创建一个新的 Vue 实例，然后使用 renderToString 方法将 Vue 实例渲染成 HTML 字符串。

// server.js
const express = require('express');
const Vue = require('vue');
const serverRenderer = require('@vue/server-renderer');

const app = express();

app.get('/', (req, res) => {
  const app = new Vue({
    template: '<App/>',
    components: { App }
  });

  serverRenderer.renderToString(app).then(html => {
    res.send(html);
  }).catch(err => {
    res.status(500).send('An error occurred: ' + err);
  });
});

app.listen(3000);