高级主题与实战：服务端渲染（SSR）

1. 什么是服务端渲染（SSR）

服务端渲染（Server-Side Rendering，简称SSR）是指在服务器上生成 HTML 内容并将其发送到客户端的过程。与传统的客户端渲染（Client-Side Rendering，CSR）不同，SSR 在用户请求页面时，服务器会生成完整的 HTML 页面并返回给浏览器。这种方式可以提高页面的加载速度和 SEO（搜索引擎优化）效果。

优点

SEO 友好：由于页面在服务器上生成，搜索引擎可以更容易地抓取和索引内容。
更快的首屏加载：用户可以更快地看到页面内容，因为 HTML 是在服务器上生成的，而不是在客户端渲染。
更好的性能：对于低性能设备，SSR 可以减轻客户端的负担，因为大部分渲染工作在服务器上完成。

缺点

服务器负担：SSR 会增加服务器的负担，因为每个请求都需要生成 HTML。
复杂性：SSR 的实现相对复杂，需要处理更多的状态管理和数据获取逻辑。
延迟：在某些情况下，SSR 可能会导致更高的延迟，尤其是在网络不佳的情况下。

注意事项

需要合理配置服务器，以确保其能够处理高并发请求。
需要考虑缓存策略，以减少服务器负担。
需要处理好客户端和服务端的状态同步。

2. Vue.js 中的 SSR

Vue.js 提供了一个强大的工具——vue-server-renderer，用于实现服务端渲染。Vue 的 SSR 主要分为两个部分：服务器端渲染和客户端重用。

2.1 安装依赖

首先，我们需要安装 Vue 和相关的 SSR 依赖：

npm install vue vue-server-renderer express

2.2 创建 Vue 组件

我们首先创建一个简单的 Vue 组件，作为我们的应用程序的基础。

// src/App.vue
<template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: 'Hello, SSR!',
      message: 'This is a server-side rendered Vue.js application.'
    };
  }
};
</script>

2.3 创建服务器

接下来，我们需要创建一个 Express 服务器来处理请求并渲染我们的 Vue 组件。

// server.js
const express = require('express');
const { createBundleRenderer } = require('vue-server-renderer');
const fs = require('fs');
const path = require('path');

const server = express();

// 读取并解析 Vue 组件
const template = fs.readFileSync(path.resolve(__dirname, 'index.template.html'), 'utf-8');
const renderer = createBundleRenderer(path.resolve(__dirname, 'dist/vue-ssr-server-bundle.json'), {
  template,
});

// 中间件处理请求
server.get('*', (req, res) => {
  const context = {
    title: 'Vue SSR Example',
    url: req.url,
  };

  renderer.renderToString(context, (err, html) => {
    if (err) {
      res.status(500).end('Internal Server Error');
      return;
    }
    res.end(html);
  });
});

// 启动服务器
server.listen(8080, () => {
  console.log('Server is running at http://localhost:8080');
});

2.4 创建模板

我们需要一个 HTML 模板来渲染我们的 Vue 组件。创建一个 index.template.html 文件：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>{{ title }}</title>
</head>
<body>
  <!--vue-ssr-outlet-->
  <script src="/dist/build.js"></script>
</body>
</html>

2.5 构建和运行

在项目根目录下，创建一个 webpack.config.js 文件，用于构建我们的 Vue 组件：

const path = require('path');
const VueServerPlugin = require('vue-server-renderer/server-plugin');

module.exports = {
  entry: './src/App.vue',
  output: {
    filename: 'build.js',
    path: path.resolve(__dirname, 'dist'),
  },
  plugins: [
    new VueServerPlugin(),
  ],
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
      },
    ],
  },
};

然后，运行构建命令：

npx webpack --config webpack.config.js

最后，启动服务器：

node server.js

访问 http://localhost:8080，你应该能看到服务端渲染的内容。

3. SSR 的状态管理

在 SSR 中，状态管理是一个重要的主题。我们需要确保在服务器和客户端之间同步状态。Vuex 是 Vue.js 的状态管理库，可以很好地与 SSR 配合使用。

3.1 安装 Vuex

npm install vuex

3.2 创建 Vuex Store

创建一个简单的 Vuex Store：

// src/store.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export function createStore() {
  return new Vuex.Store({
    state: {
      message: 'Hello from Vuex!',
    },
    mutations: {
      setMessage(state, message) {
        state.message = message;
      },
    },
  });
}

3.3 在 SSR 中使用 Vuex

在服务器端渲染时，我们需要在 context 中添加 Vuex Store 的状态：

// server.js
const { createStore } = require('./src/store');

server.get('*', (req, res) => {
  const store = createStore();
  const context = {
    title: 'Vue SSR Example',
    url: req.url,
    state: store.state,
  };

  renderer.renderToString(context, (err, html) => {
    if (err) {
      res.status(500).end('Internal Server Error');
      return;
    }
    res.end(html);
  });
});

3.4 客户端重用状态

在客户端，我们需要重用服务器端的状态：

// src/main.js
import Vue from 'vue';
import App from './App.vue';
import { createStore } from './store';

const store = createStore();
const app = new Vue({
  store,
  render: h => h(App),
});

app.$mount('#app');

4. 总结

服务端渲染（SSR）是提升 Vue.js 应用性能和 SEO 的有效手段。通过合理的架构设计和状态管理，我们可以构建出高效、可维护的 SSR 应用。尽管 SSR 带来了额外的复杂性和服务器负担，但其带来的性能和 SEO 优势使其在许多场景下成为首选。

参考资料

通过本教程，你应该能够理解服务端渲染的基本概念，并能够在 Vue.js 应用中实现 SSR。希望这篇文章对你有所帮助！