Astro JS动态嵌套路由实现方案优化咨询

核心方案：抽离共享数据模块并利用Node.js缓存 #

把API请求逻辑封装成独立的工具函数，借助Node.js的模块缓存特性，让多个路由文件共享同一份API数据，避免重复请求。

步骤1：创建共享数据模块 #

在项目的src/utils目录下新建fetchLeagueData.js文件，实现带缓存的API请求：

let cachedLeagueData = null;

export async function getLeagueData() {
  // 如果已有缓存数据，直接返回
  if (cachedLeagueData) {
    return cachedLeagueData;
  }

  // 发起API请求
  const response = await fetch('你的足球赛事API地址');
  if (!response.ok) {
    throw new Error(`请求联赛数据失败：${response.statusText}`);
  }

  // 缓存数据并返回
  cachedLeagueData = await response.json();
  return cachedLeagueData;
}

步骤2：在联赛首页路由中使用 #

修改[league]/index.astro的getStaticPaths，导入并调用共享函数：

---
import { getLeagueData } from '../utils/fetchLeagueData';

export async function getStaticPaths() {
  const leagueData = await getLeagueData();
  
  // 生成所有联赛首页的静态路径
  return leagueData.map(league => ({
    params: { league: league.slug }, // 假设每个联赛有slug字段作为路由参数
    props: { league },
  }));
}

const { league } = Astro.props;
---
<!-- 联赛首页的页面内容 -->
<h1>{league.name} 联赛首页</h1>

步骤3：在月度赛事页路由中使用 #

修改[league]/[month].astro的getStaticPaths，同样导入共享函数：

---
import { getLeagueData } from '../../utils/fetchLeagueData';

export async function getStaticPaths() {
  const leagueData = await getLeagueData();
  const paths = [];

  // 遍历所有联赛，生成每个联赛对应月份的静态路径
  leagueData.forEach(league => {
    // 假设每个联赛数据中包含可用的月份列表，比如league.availableMonths
    league.availableMonths.forEach(month => {
      paths.push({
        params: { league: league.slug, month },
        props: { league, month },
      });
    });
  });

  return paths;
}

const { league, month } = Astro.props;
---
<!-- 月度赛事页的页面内容 -->
<h1>{league.name} {month} 赛事</h1>

额外优化：开发模式下的缓存刷新（可选） #

如果在开发时需要定期刷新缓存，避免一直用旧数据，可以给缓存加过期时间：

let cachedLeagueData = null;
let cacheExpiryTime = 0;
const CACHE_TTL = 60 * 1000; // 缓存有效期1分钟

export async function getLeagueData() {
  const now = Date.now();
  // 检查缓存是否存在且未过期
  if (cachedLeagueData && now < cacheExpiryTime) {
    return cachedLeagueData;
  }

  const response = await fetch('你的足球赛事API地址');
  if (!response.ok) {
    throw new Error(`请求联赛数据失败：${response.statusText}`);
  }

  cachedLeagueData = await response.json();
  cacheExpiryTime = now + CACHE_TTL;
  return cachedLeagueData;
}

原理说明 #

Node.js的模块系统会缓存模块的导出结果，第一次调用getLeagueData时发起API请求并缓存数据，后续所有路由文件调用该函数时，都会直接返回缓存的数据，不会重复发起API请求。

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