Next.js非页面子组件如何实现类似getStaticProps的服务端缓存请求

方案1：页面层预取数据透传（Pages Router 通用首选） #

• 直接在首页的getStaticProps中同时获取产品数据和分类数据，把分类数据通过 props 传递给顶部菜单子组件即可，完全复用getStaticProps的静态生成+缓存能力，无额外请求，实现成本最低
• 如果组件嵌套层级过深不想逐层透传，可以结合 React Context 把预取的分类数据全局注入，子组件直接消费即可

方案2：封装带静态缓存的API路由（适合多页面复用分类组件的场景） #

• 新建pages/api/categories.js路由，接口内请求分类数据后设置强缓存响应头：

export default async function handler(req, res) {
  // 配置缓存7天，单位为秒
  res.setHeader('Cache-Control', 's-maxage=604800, stale-while-revalidate')
  const categories = await fetch('你的分类数据源地址').then(r => r.json())
  res.status(200).json(categories)
}

• 子组件内用 SWR 或者 React Query 请求该接口，两类工具库会自动缓存响应结果，同一用户多次访问只会发起一次请求；同时服务端 CDN 缓存会保证不同用户请求时不会重复回源拉取分类数据，效果和getStaticProps完全一致

方案3：App Router（Next.js 13+）原生支持 #

• 直接把分类菜单组件标记为服务端组件，在组件内直接发起请求，Next.js 会自动对服务端组件的请求结果做静态缓存，效果和getStaticProps完全一致，不需要额外处理：

// app/components/Nav.js 默认是服务端组件
async function Nav() {
  // 该请求会在构建时执行，结果自动静态缓存
  const categories = await fetch('你的分类数据源地址', { cache: 'force-cache' }).then(r => r.json())
  return <menu>{categories.map(cat => <div key={cat.id}>{cat.name}</div>)}</menu>
}
export default Nav

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