Next.js：如何在服务器端缓存全用户共享的初始数据

针对你遇到的NFT集合加载延迟问题，结合数据不常更新、需全局共享的需求，推荐两个无需额外依赖、简洁高效的方案：

方案一：构建时预生成静态数据 + Context 全局共享 #

直接在项目构建阶段拉取并保存NFT集合数据，所有用户访问时直接读取静态数据，彻底消除请求延迟：

1. 编写预加载脚本：在项目根目录创建scripts/preload-collections.js，通过GraphQL请求获取数据并保存为JSON文件（比如data/collections.json）
2. 配置构建触发：在package.json的scripts中添加"prebuild": "node scripts/preload-collections.js"，确保构建前自动执行脚本生成数据
3. 注入Context：在collections-context.tsx中直接导入生成的JSON文件，作为Context的初始值。所有组件通过Context获取数据即可

如果需要每24小时更新数据，可通过CI/CD工具定时触发项目构建，自动更新静态数据。

方案二：API路由边缘缓存 + Context 全局共享 #

利用Next.js的边缘缓存机制，实现24小时全局共享缓存，无需频繁构建：

1. 创建API路由：在app/api/collections/route.ts中编写请求GraphQL的逻辑，并设置缓存头部：

import { NextResponse } from 'next/server';

export async function GET() {
  // 发起GraphQL请求获取数据
  const graphqlRes = await fetch('你的GraphQL接口地址', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ query: 'NFT集合查询语句' }),
  });
  const collectionsData = await graphqlRes.json();

  // 设置24小时缓存，同时启用 stale-while-revalidate 策略
  return NextResponse.json(collectionsData, {
    headers: {
      'Cache-Control': 's-maxage=86400, stale-while-revalidate',
    },
  });
}

2. Context初始化：在collections-context.tsx中，初始化时调用这个API路由获取数据。由于Cache-Control设置了s-maxage=86400，部署平台的CDN会缓存该响应，所有用户共享缓存结果；24小时后CDN会自动重新请求更新数据，同时旧缓存可继续使用，避免用户等待。

对现有思路的补充说明 #

• Redux：确实冗余，小型项目用Context完全能满足全局数据共享需求
• 自定义缓存库：无需引入，Next.js自带的静态生成和边缘缓存机制足够覆盖需求
• getStaticProps + Context：无需在每个页面调用，更高效的方式是直接在构建阶段预生成数据注入Context，或通过API路由缓存统一获取
• SWR：更适合客户端个体缓存场景，全局共享缓存用CDN层面的边缘缓存更优，能避免用户首次访问的加载延迟

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