如何在Github Pages的React项目中每日仅调用一次API？

直接在Github Pages运行的前端项目里动态修改根目录的JSON文件是做不到的——因为Github Pages是纯静态托管，没有服务器端执行环境，无法在用户请求时修改仓库中的静态文件。不过可以通过以下几种方案实现你的需求：

方案1：Github Actions定时拉取并更新仓库中的数据文件 #

这是最贴合你需求的方案，通过自动化脚本每日拉取后端数据，更新仓库里的JSON文件，所有客户端直接读取这个静态文件：

1. 在你的React项目根目录创建一个data.json（初始可以是空对象或者默认数据）。
2. 编写Node.js脚本update-data.js，用于调用后端API并写入数据：

const fs = require('fs');
const fetch = require('node-fetch');

async function fetchAndSaveData() {
  try {
    // 替换为你的后端API地址
    const response = await fetch('https://your-backend-api.com/data');
    if (!response.ok) throw new Error(`API请求失败: ${response.status}`);
    
    const data = await response.json();
    // 写入项目根目录的data.json
    fs.writeFileSync('./data.json', JSON.stringify(data, null, 2));
    console.log('数据已成功更新');
  } catch (error) {
    console.error('更新数据出错:', error.message);
  }
}

fetchAndSaveData();

3. 创建Github Actions工作流文件.github/workflows/daily-data-update.yml，配置每日定时执行脚本并提交更新：

name: 每日更新后端数据
on:
  # 每天UTC时间零点执行（可根据需求调整时区）
  schedule:
    - cron: '0 0 * * *'
  # 允许手动触发更新
  workflow_dispatch:

jobs:
  update-data:
    runs-on: ubuntu-latest
    steps:
      - name: 拉取仓库代码
        uses: actions/checkout@v4

      - name: 设置Node.js环境
        uses: actions/setup-node@v4
        with:
          node-version: '20'

      - name: 安装依赖
        run: npm install node-fetch

      - name: 执行数据更新脚本
        run: node update-data.js

      - name: 提交并推送更新
        run: |
          git config --global user.name "GitHub Actions Bot"
          git config --global user.email "actions@github.com"
          git add data.json
          # 只有当文件有变化时才提交
          git commit -m "每日数据更新: $(date -u +'%Y-%m-%d')" || echo "数据无变化，无需提交"
          git push

4. 在你的React组件中，直接请求这个静态JSON文件即可：

import { useEffect, useState } from 'react';

function DataComponent() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch('/data.json')
      .then(res => res.json())
      .then(data => {
        setData(data);
        setLoading(false);
      })
      .catch(err => console.error('加载数据失败:', err));
  }, []);

  if (loading) return <div>加载中...</div>;
  return <div>{/* 渲染数据 */}</div>;
}

export default DataComponent;

方案2：用第三方缓存层代理请求 #

如果不想频繁更新仓库，可以用无服务器服务做中间缓存层：

• 前端请求指向缓存服务地址，而非直接请求后端API
• 缓存服务中实现逻辑：首次请求时调用后端API，将数据缓存24小时；后续所有请求直接返回缓存的数据
• 所有客户端共享这个缓存，避免重复调用后端API

关键注意事项 #

• 确保后端API允许跨域请求（或在Actions/缓存服务中处理跨域问题）
• 如果后端API需要认证，将密钥存储在Github Secrets中（Actions方案）或缓存服务的环境变量中，不要硬编码在代码里

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