NextJS 13 Fetch请求记忆

yhived7q  于 2023-10-18  发布在  其他
关注(0)|答案(1)|浏览(118)

bounty还有2天到期。此问题的答案有资格获得+50声望奖励。Gokhan Celikkaya希望引起更多的注意这个问题。

我正在使用NextJS 13进行一个React项目,我在使用request memoization for fetch时遇到了问题。它总是发送请求到后端,即使在同一个请求。
我在http://localhost:8088/test上有一个简单的端点,它只记录一些东西来检查是否收到请求。下面是我的page.tsx代码。当我重新加载页面时,我在后端服务器中看到4个日志; 2来自元数据2来自页面。即使是完全相同的请求,也不会按照NextJS文档中的说明进行重复数据消除
我在这里遗漏了什么,为什么fetch('http://localhost:8088/test')实际上被执行了四次。如何使用请求记忆,以便在PagegenerateMetadata中使用相同的数据,并且此代码只执行一次请求?

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>
    </>
  );
}
6jjcrrmo

6jjcrrmo1#

应该在fetch方法中禁用该高速缓存。请记住,在NextJs中,一切都基于转换,而不是转换:

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

通过使用这种转换,NextJ将理解不缓存该组件中的任何内容。

相关问题