NextJS 13中fetch请求记忆化失效问题求助

问题原因 #

1. fetchCache: 'force-no-store'完全禁用请求复用：这个配置强制NextJS不对任何fetch请求做缓存或复用处理，每次调用fetch都会发起全新的HTTP请求，直接违背了你要实现的request memoization需求。
2. 无意义的重复调用getItem()：你在generateMetadata和Page组件中各调用了两次getItem()，每次调用都会执行一次fetch，在禁用复用的前提下，自然会产生4次重复请求。

修复方案 #

1. 移除fetchCache: 'force-no-store'：静态页面（dynamic: force-static）下默认的fetchCache配置为force-cache，允许请求复用，完全符合你的需求。
2. 用React.cache包裹数据获取函数：通过cache包裹异步函数，确保多次调用时返回同一个Promise，触发NextJS的请求复用机制，仅发送一次HTTP请求。
3. 精简getItem()调用次数：在generateMetadata和Page中各调用一次即可，两者共享同一份请求结果。

修改后的代码示例：

import { Metadata } from 'next';
import { cache } from 'react';

export const dynamic = 'force-static';

// 用React.cache包裹，确保多次调用返回同一个Promise
const getItem = cache(async () => {
  const res = await fetch('http://localhost:8088/test');
  return res.json();
});

export async function generateMetadata(): Promise<Metadata> {
  await getItem();
  return {
    metadataBase: new URL('http://localhost:3000'), // 补充http协议，避免URL解析错误
    title: 'test'
  };
}

export default async function Page() {
  // 复用之前的请求结果
  const data = await getItem();
  return (
    <>
      <p>test</p>
      <p>接口返回数据：{JSON.stringify(data)}</p>
    </>
  );
}

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