部署于Firebase的React应用如何托管低频更新公共JSON，免重部署可缓存？

托管位置选择（满足“更新JSON无需重新部署整个应用”的核心需求） #

你完全不需要把参考JSON硬塞在应用构建代码里，Firebase生态里两个原生位置都能满足单独更新文件、不用重打整包的要求，优先级从高到低推荐：

• 首选：Firebase Hosting 静态资源目录
  在本地项目的public静态文件夹下新建独立路径存放参考JSON，比如public/static/reference-data.json，构建后这个文件会被原样输出到托管的静态路径下。后续要更新这个JSON时，根本不需要重新跑npm run build、也不需要部署整个应用的所有静态文件，直接执行firebase deploy --only hosting:static/reference-data.json命令，单独上传这一个文件就行，完全不会影响线上运行的React应用本身。
• 次选：Firebase Storage 公开访问存储桶
  如果你更习惯用Storage管理文件，直接把JSON上传到指定的公开存储桶路径也可以，更新时直接在Storage控制台替换对应文件就行，同样不需要碰应用代码的部署流程。

解决“避免每次渲染重复下载、按指定时长缓存”的问题 #

你之前担心的“每次页面渲染都重新下载文件”，本质不是托管位置的问题，是两层缓存配置没做好的原因，只要把两层缓存配好，完全可以实现长时间不重复下载：

第一层：HTTP/CDN 长效缓存（最省请求的核心） #

不管你把JSON放在Hosting还是Storage，直接通过配置设置响应的缓存规则，让浏览器和CDN节点帮你存文件，根本不会每次访问都发源站请求：

• 如果放在Firebase Hosting：在项目根目录的firebase.json配置文件里，给这个JSON的匹配路径加自定义响应头，比如设置30天的缓存时长：

  {
    "hosting": {
      "headers": [
        {
          "source": "/static/reference-data.json",
          "headers": [
            {
              "key": "Cache-Control",
              "value": "public, max-age=2592000, s-maxage=2592000"
            }
          ]
        }
      ]
    }
  }
  

  配置生效后，全球CDN节点会把这个JSON缓存30天，用户本地浏览器也会缓存30天，缓存有效期内用户访问应用根本不会发起这个JSON的下载请求，完全匹配你“数月才更新一次”的场景。
• 如果放在Firebase Storage：上传文件时给这个JSON自定义设置cacheControl元数据，同样设为30天的max-age规则，对应的公开访问URL就会自动携带缓存响应头，不会出现每次请求都重新下载的问题。

第二层：应用内全局缓存（避免同会话下的重复请求） #

就算HTTP缓存已经生效，也要避免在React组件的渲染逻辑里写重复的拉取逻辑：

• 把拉取参考JSON的逻辑从各个业务组件里抽出来，放在应用根组件的初始化逻辑里，只在应用加载时拉取一次，把结果存在全局状态（比如React Context、轻量状态管理库）里，所有需要用到这份参考数据的组件直接从全局状态读取，不要每个组件自己发起一次请求。
• 简化的实现示例：

  // 定义全局参考数据的上下文
  const ReferenceDataContext = createContext(null);
  
  function AppRoot({ children }) {
    const [referenceData, setReferenceData] = useState(null);
  
    // 应用初始化时只执行一次拉取逻辑
    useEffect(() => {
      // 已经有数据就跳过，避免React StrictMode下的重复请求
      if (referenceData) return;
      fetch('/static/reference-data.json')
        .then(res => res.json())
        .then(data => setReferenceData(data));
    }, [referenceData]);
  
    return (
      <ReferenceDataContext.Provider value={referenceData}>
        {children}
      </ReferenceDataContext.Provider>
    );
  }
  

配套优化小技巧 #

如果担心固定时长的缓存导致用户拿不到刚更新的JSON，可以在请求URL上拼接版本号参数，比如把请求路径改成/static/reference-data.json?v=20240601，每次更新JSON的时候只需要改一下URL上的版本号标识，就算之前的30天缓存还没到期，浏览器也会自动发起新请求拉取最新的文件，完全不会出现缓存滞后的问题。

注意：不建议把这份静态参考数据存在Realtime Database里，这类数月才更新一次的静态数据，走带CDN缓存的静态资源路径，不管是加载延迟还是请求开销，都比走数据库实时连接要低得多。

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