NextJS 13 获取请求记忆

Question

request memoization我正在使用 NextJS 13 开发 React 项目，但在使用for时遇到问题fetch。即使在同一个请求中，它也总是向后端发送请求。

我有一个简单的端点，http://localhost:8088/test仅记录一些内容以检查是否收到请求。我的page.tsx. 当我重新加载页面时，我在后端服务器中看到 4 个日志；2 来自元数据 2 来自页面。即使是完全相同的请求，也不会按照NextJS 文档中的说明进行重复数据删除

我在这里缺少什么，为什么fetch('http://localhost:8088/test')实际上被执行了四次。如何使用请求记忆，以便我可以在两者中使用相同的数据Page，并且generateMetadata此代码仅执行一次请求？

import { Metadata } from 'next';

export const dynamic = 'force-static';
export const fetchCache = 'force-no-store';

async function getItem() {
  const res = await fetch('http://localhost:8088/test');
  return res.json();
}

export async function generateMetadata(): Promise<Metadata> {
  getItem();
  getItem();
  return {
    metadataBase: new URL('localhost:3000'),
    title: 'test'
  };
}

export default async function Page() {
  getItem();
  getItem();
  return (
    <>
      <p>test</p>
    </>
  );
}

Answer 1

您应该在方法中禁用缓存fetch。请记住，在 NextJs 中，一切都基于转换，而不是配置：

const res = await fetch(
  'http://localhost:8088/test',
  { cache: 'no-store' }
);

通过使用此转换，NextJs 将了解不要缓存此组件中的任何内容。