Vue.js 与SSR的服务器端渲染

在本文中，我们将介绍Vue.js的服务器端渲染（SSR）功能以及如何使用Vue.js和SSR实现服务器端水合（hydration）。

Vue.js的服务器端渲染（SSR）

Vue.js是一种用于构建用户界面的JavaScript框架。其中的服务器端渲染（Server Side Rendering，简称SSR）功能能够在服务器端将Vue组件渲染为HTML，并在浏览器中对其进行注水（hydrate）。

相较于传统的客户端渲染（Client Side Rendering，简称CSR），SSR具备以下优势：
1. SEO友好：由于SSR在服务器端生成HTML，搜索引擎能够直接读取并索引页面内容，有助于提升网页的搜索引擎优化结果。
2. 更快的首次加载：由于SSR在服务器端生成了完整的HTML，用户在首次加载页面时将能够更快地看到页面的内容。
3. 更好的性能表现：通过将一些基础数据预渲染到HTML中，减轻了客户端渲染时的压力，使页面加载更快，交互更流畅。

使用Vue.js和SSR实现服务器端注水

步骤一：设置Vue应用的入口文件

首先，我们需要创建一个入口文件来初始化Vue应用。在服务器端渲染的情况下，我们需要使用createRenderer方法来创建一个渲染器。

// server-entry.js

import Vue from 'vue';
import { createRenderer } from 'vue-server-renderer';
import App from './App.vue';

const renderer = createRenderer();

export default async function serverRender() {
  const app = new Vue({
    render: (h) => h(App),
  });

  const html = await renderer.renderToString(app);

  // 返回渲染后的HTML
  return html;
}

步骤二：设置服务端的路由和响应逻辑

接下来，我们需要设置服务器端的路由和响应逻辑，将Vue应用渲染为HTML并返回给客户端。

// server.js

import express from 'express';
import serverRender from './server-entry';

const app = express();

app.get('/', async (req, res) => {
  const html = await serverRender();
  res.send(html);
});

app.listen(3000, () => {
  console.log('Server started on port 3000');
});

步骤三：前后端代码共享

在进行服务器端渲染时，我们通常需要在前后端之间共享一些代码。为了实现这一点，我们可以使用Vue的通用代码策略，让相同的代码既可以在服务器端也可以在客户端运行。

// App.vue

<template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: 'Vue SSR',
      message: 'Hello, Vue SSR!',
    };
  },
};
</script>