Vue2非SPA场景下无Vuex/Router实现SSR单文件组件API预取数据

其实不用依赖Vuex或Router也能解决这个问题，核心思路是让组件暴露一个专门的异步数据预取方法，然后在服务端的入口文件里等待这个方法执行完成后再渲染组件。下面是具体的实现步骤：

1. 修改组件，添加数据预取方法 #

首先把你的Test.vue组件里的API请求逻辑抽成一个静态异步方法，同时在客户端生命周期里复用这个方法，避免客户端和服务端的数据不匹配：

<template>
  <div>
    <!-- 注意这里要访问response的data属性，axios返回的response是包含data的对象 -->
    {{ apidata.data }}
  </div>
</template>
<script>
import axios from 'axios';

// 服务端请求API时需要绝对路径，这里可以根据环境配置
const API_BASE_URL = process.env.NODE_ENV === 'production' 
  ? 'https://your-production-api.com' 
  : 'http://localhost:3000';

export default {
  data() {
    return { apidata: {} };
  },

  // 定义静态异步方法，专门用于服务端预取数据
  static async asyncData() {
    try {
      const response = await axios.get(`${API_BASE_URL}/api/v1/versions.json`, {
        params: { card_id: 274 }
      });
      // 返回要注入到组件的数据
      return { apidata: response };
    } catch (err) {
      console.error('数据预取失败:', err);
      throw err; // 抛出错误让服务端处理
    }
  },

  // 客户端生命周期钩子，复用预取方法保证数据同步
  async beforeCreate() {
    // 只有当数据不存在时才重新获取（避免服务端已经渲染好数据后客户端重复请求）
    if (!Object.keys(this.apidata).length) {
      const data = await this.$options.asyncData();
      Object.assign(this.$data, data);
    }
  }
};
</script>

2. 修改服务端入口，等待数据预取完成 #

在entry_server.js里，创建Vue实例后，先调用组件的asyncData方法，等待数据获取完成后再将实例返回给渲染器：

import Vue from 'vue';
import Test from 'components/Test.vue';

export default function(context) {
  return new Promise(async (resolve, reject) => {
    try {
      // 先调用组件的静态asyncData方法获取数据
      const prefetchData = await Test.asyncData();

      // 创建Vue实例时，直接把预取到的数据注入到data中
      const app = new Vue({
        data() {
          return prefetchData;
        },
        render: h => h(Test, { props: {} })
      });

      // 数据已准备好，返回实例进行渲染
      resolve(app);
    } catch (error) {
      // 处理数据预取过程中的错误
      reject(error);
    }
  });
};

关键细节说明 #

• 服务端axios路径问题：服务端运行时无法识别相对路径（比如/api/xxx），所以必须配置API的绝对地址，你可以通过环境变量来区分开发和生产环境。
• 客户端数据复用：在客户端的beforeCreate里调用同一个预取方法，是为了保证服务端渲染的内容和客户端hydration的内容一致，避免Vue报错。
• 错误处理：一定要在预取方法和服务端入口里捕获错误，否则一旦API请求失败，整个SSR渲染就会崩溃。

如果后续有多个组件需要预取数据，你也可以写一个简单的工具函数，遍历组件树收集所有的asyncData方法，并行执行后再统一注入数据——不过针对单个组件的场景，上面的方案已经足够简洁有效了。

内容的提问来源于stack exchange，提问作者jsanroman