Next.js中unstable_cache能否在构建时使用？问题排查与方案咨询

一、unstable_cache是否支持构建时使用？ #

Next.js 13.4.x版本中，unstable_cache不支持在静态构建阶段（比如generateStaticParams、静态Page组件构建）使用。它的设计目标是服务端运行时（Server Components的请求阶段）的缓存，构建时不存在incrementalCache环境，这就是你遇到「incrementalCache missing」错误的核心原因。

二、针对两个错误的解决方案 #

1. 解决「incrementalCache missing in unstable_cache」错误 #

由于构建时无法使用unstable_cache，需根据你的渲染场景调整数据获取逻辑：

• 静态生成（SSG）场景：
  • 方案一：直接在generateStaticParams中获取所需数据，将数据作为props传递给页面组件，静态构建时数据会被打包进静态文件，后续请求直接复用缓存内容。
  • 方案二：改用fetch的原生缓存（Next.js 13对fetch有自动缓存支持），结合revalidate配置实现按需重新生成。
• 动态运行时场景：
  • 将unstable_cache包裹的数据获取逻辑放在运行时执行的Server Component中，避免在generateStaticParams里调用。

代码示例（静态生成传递数据）：

// app/[id]/page.tsx
export async function generateStaticParams() {
  // 构建时直接从数据库获取所有路由参数对应的id
  const ids = await fetchAllIdsFromDB();
  return ids.map(id => ({ id }));
}

async function Page({ params }: { params: { id: string } }) {
  // 用fetch结合revalidate实现1小时缓存
  const res = await fetch(`https://api.example.com/data/${params.id}`, { next: { revalidate: 3600 } });
  const data = await res.json();
  
  return <div>{JSON.stringify(data)}</div>;
}

export default Page;

2. 解决「Objects are not valid as a React child (found: [object Promise])」错误 #

这个错误是因为你在React组件中直接返回了未解析的Promise，而非等待Promise完成后返回JSX。解决方式：

• 确保Page组件是Server Component（App Router下默认就是，不要添加'use client'指令），并正确使用await处理异步操作。
• 如果是Client Component需要异步数据，使用useEffect结合状态管理，或用Suspense包裹Server Component来处理加载状态。

正确的async Server Component示例：

// app/page.tsx
// 默认是Server Component，无需加'use client'
async function Page() {
  // 正确await异步数据
  const data = await fetchDataFromDB();
  return (
    <div>
      <h1>缓存数据展示</h1>
      <p>{data.content}</p>
    </div>
  );
}

// 用unstable_cache包裹数据获取函数（仅运行时生效）
const fetchDataFromDB = unstable_cache(async () => {
  const res = await db.query('SELECT * FROM target_table LIMIT 1');
  return res[0];
}, ['db-content-key'], { revalidate: 3600 }); // 缓存1小时

export default Page;

Client Component异步数据处理示例：

'use client';
import { useEffect, useState } from 'react';

function ClientDataComponent() {
  const [data, setData] = useState<null | any>(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    async function fetchData() {
      const res = await fetch('/api/get-data');
      const result = await res.json();
      setData(result);
      setLoading(false);
    }
    fetchData();
  }, []);

  if (loading) return <div>加载中...</div>;
  return <div>{data.content}</div>;
}

export default ClientDataComponent;

三、构建时缓存的替代方案 #

如果确实需要在构建阶段实现数据缓存，可以自行实现简单的内存缓存：

// 构建时专用缓存工具
const buildCache = new Map<string, any>();

async function fetchWithBuildCache(key: string, fetcher: () => Promise<any>) {
  if (buildCache.has(key)) {
    return buildCache.get(key);
  }
  const data = await fetcher();
  buildCache.set(key, data);
  return data;
}

// 在generateStaticParams中使用
export async function generateStaticParams() {
  const ids = await fetchWithBuildCache('all-route-ids', () => fetchAllIdsFromDB());
  return ids.map(id => ({ id }));
}

内容的提问来源于stack exchange，提问作者Joey Yi Zhao