Nuxt中链式Fetch请求优化：解决Reddit内容LCP延迟问题

核心思路 #

先获取10条帖子快速渲染首屏，解决LCP延迟问题；再通过Reddit API的after游标参数，链式获取剩余90条数据并追加到列表。

简洁实现方案 #

方案1：一次性补全剩余90条（请求少，实现简单）

async fetch() {
  // 1. 优先获取10条数据，快速更新页面
  const initialRes = await this.$axios.get(
    `${this.baseUrl}${this.builtUrl}/${this.sortOption}.json?raw_json=1&limit=10`
  );
  this.posts = initialRes.data.data.children;
  this.nextPage = initialRes.data.data.after;
  this.page = initialRes.data.data.after;

  // 2. 利用after参数获取剩余90条
  if (this.nextPage) {
    try {
      const remainingRes = await this.$axios.get(
        `${this.baseUrl}${this.builtUrl}/${this.sortOption}.json?raw_json=1&limit=90&after=${this.nextPage}`
      );
      this.posts = [...this.posts, ...remainingRes.data.data.children];
      this.nextPage = remainingRes.data.data.after;
    } catch (err) {
      console.error('加载剩余帖子失败:', err);
    }
  }
}

方案2：分批次加载（每次10条，容错性更强）

如果担心单次请求90条仍有延迟，可分9次加载，每次10条：

async fetch() {
  // 初始加载10条
  let res = await this.$axios.get(
    `${this.baseUrl}${this.builtUrl}/${this.sortOption}.json?raw_json=1&limit=10`
  );
  this.posts = res.data.data.children;
  let after = res.data.data.after;
  this.nextPage = after;
  this.page = after;

  // 循环加载剩余9次（每次10条）
  for (let i = 0; i < 9 && after; i++) {
    try {
      res = await this.$axios.get(
        `${this.baseUrl}${this.builtUrl}/${this.sortOption}.json?raw_json=1&limit=10&after=${after}`
      );
      this.posts = [...this.posts, ...res.data.data.children];
      after = res.data.data.after;
      this.nextPage = after;
    } catch (err) {
      console.error(`第${i+1}次加载失败:`, err);
      break; // 出错停止后续请求，避免无意义重试
    }
  }
}

关键说明 #

• 优先渲染首屏：初始请求仅获取10条数据，确保页面快速响应，直接优化LCP指标
• 游标分页：Reddit API返回的after参数标记当前批次最后一条帖子的ID，后续请求带上该参数即可获取下一批数据
• 错误隔离：后续加载的请求包裹在try/catch中，即使加载失败也不会影响首屏内容的展示

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