vue的ssr服务端渲染示例详解

下面是关于“Vue的SSR服务端渲染示例详解”的完整攻略：

一、什么是Vue的SSR服务端渲染？

Vue的SSR服务端渲染，全称Server-Side Rendering，是指将Vue组件在服务器端渲染成HTML字符串，然后直接发送给浏览器渲染。相比于传统的客户端渲染，SSR有以下优点：

对于SEO（搜索引擎优化）更加友好，因为搜索引擎爬虫可以直接获取到完整的HTML内容；
加载速度更快，因为不需要等待JS文件的加载和执行；
更加易于开发，可以利用服务器端的优势，比如对于数据的预处理、缓存等等。

二、如何使用Vue的SSR服务端渲染？

Vue提供了一个官方的SSR插件，可以方便我们实现服务端渲染，下面我们来看一个简单的示例。

示例一：基础示例

我们首先需要安装Vue的SSR插件，使用npm进行安装：

npm install vue-server-renderer --save

然后创建一个Vue实例，并将其导出，代码如下：

// main.js
import Vue from 'vue';
import App from './App';

export function createApp() {
  const app = new Vue({
    render: h => h(App)
  });
  return { app };
}

其中，App是我们的根组件。

接着，我们在服务器端创建一个Express应用，并在路由中使用Vue的SSR插件进行渲染，代码如下：

// server.js
const express = require('express');
const { createRenderer } = require('vue-server-renderer');
const { createApp } = require('./main');

const app = express();

const renderer = createRenderer();

app.get('/', (req, res) => {
  const { app } = createApp();
  renderer.renderToString(app, (err, html) => {
    if (err) {
      res.status(500).end('Internal Server Error');
      return;
    }
    res.end(`
      <!DOCTYPE html>
      <html lang="en">
        <head>
          <title>Server-Side Rendering</title>
        </head>
        <body>
          ${html}
        </body>
      </html>
    `);
  });
});

const server = app.listen(3000, () => {
  console.log(`Server running at http://localhost:${server.address().port}`);
});

其中，createRenderer是Vue的SSR插件提供的创建渲染器的方法，renderToString则是将Vue组件渲染成HTML字符串的方法。

最后我们启动服务器，访问http://localhost:3000，就可以看到我们的页面了。

示例二：带数据的示例

我们可以使用vue-router和vuex等工具来实现更加复杂的SSR应用，这里我们展示一个带数据的示例。

首先，在我们的App组件中，我们使用asyncData方法来获取数据，代码如下：

// App.vue
<template>
  <div>
    <h1>{{ title }}</h1>
    <ul>
      <li v-for="item in items">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  asyncData() {
    return new Promise(resolve => {
      setTimeout(() => {
        resolve({
          title: 'Server-Side Rendering',
          items: ['Vue', 'SSR', 'Express']
        });
      }, 1000);
    });
  },
  data() {
    return {
      title: '',
      items: []
    };
  },
  mounted() {
    this.title = this.$data.title;
    this.items = this.$data.items;
  }
};
</script>

其中，asyncData方法返回一个Promise，用于获取需要渲染的数据。

然后，在我们的createApp函数中，我们使用context参数将数据传递给我们的组件，代码如下：

// main.js
import Vue from 'vue';
import App from './App';

export function createApp(context) {
  const app = new Vue({
    render: h => h(App, { props: context })
  });
  return { app };
}

接着，我们修改我们的服务器端代码，将上面获取到的数据传递给createApp函数，代码如下：

// server.js
const express = require('express');
const { createRenderer } = require('vue-server-renderer');
const { createApp } = require('./main');

const app = express();

const renderer = createRenderer();

app.get('/', (req, res) => {
  const context = {
    title: 'Server-Side Rendering',
    items: ['Vue', 'SSR', 'Express']
  };
  const { app } = createApp(context);
  renderer.renderToString(app, (err, html) => {
    if (err) {
      res.status(500).end('Internal Server Error');
      return;
    }
    res.end(`
      <!DOCTYPE html>
      <html lang="en">
        <head>
          <title>${context.title}</title>
        </head>
        <body>
          ${html}
        </body>
      </html>
    `);
  });
});

const server = app.listen(3000, () => {
  console.log(`Server running at http://localhost:${server.address().port}`);
});

可以看到，在createApp函数中我们传递了context参数，并在服务器端获取数据后直接传递给了它。

最后，启动服务器，访问http://localhost:3000，就可以看到我们带有数据的页面了。