vue之服务端渲染(SSR)

Vue的服务端渲染(SSR)是一个过程，它生成HTML作为响应一个服务器请求，并在将其发送到客户端之前集成了Vue实例的初始状态。

以下是一个使用Express.js和Vue的SSR的基本示例：

1. 安装依赖项：

npm install express vue vue-server-renderer lru-cache

2. 创建一个Vue组件：

// server-entry.js
import Vue from 'vue';
 
export default {
  data() {
    return {
      msg: 'Hello, server-side rendering!'
    };
  },
  template: `<div>{{ msg }}</div>`
};

3. 设置服务器：

// server.js
const express = require('express');
const serverRenderer = require('vue-server-renderer');
const LRU = require('lru-cache');
const app = express();
 
const cache = new LRU({
  max: 100,
  maxAge: 1000 * 60 // 60 seconds
});
 
app.get('*', (req, res) => {
  const cachedHtml = cache.get(req.url);
  if (cachedHtml) {
    res.send(cachedHtml);
    return;
  }
 
  const renderer = serverRenderer.createBundleRenderer(
    './dist/server-bundle.js', // 假设你的Vue SSR bundle位于这个路径
    {
      cache: LRU({
        max: 1000,
        maxAge: 1000 * 60 * 5, // 5 minutes
      }),
    }
  );
 
  renderer.renderToString(req, (err, html) => {
    if (err) {
      if (err.code === 404) {
        res.status(404).end('Page not found');
      } else {
        res.status(500).end('Internal Server Error');
      }
      return;
    }
    cache.set(req.url, html);
    res.end(html);
  });
});
 
app.listen(3000, () => {
  console.log('Server is running on http://localhost:3000');
});

4. 构建Vue bundle：

// 你需要一个webpack配置来创建服务端bundle

确保你的Vue组件和服务器代码正确配置，并且webpack配置能够生成服务端需要的bundle。这个例子使用了vue-server-renderer和lru-cache来缓存渲染的HTML。实际项目中，你可能需要更复杂的缓存策略和错误处理。