Nextjs 13+ 元数据和页面数据双重获取

Question

我有简单的 next js 应用程序和应用程序路由器 NextJS13+。我完全按照文档中的方式使用动态元数据。

import { Metadata, ResolvingMetadata } from 'next'

type Props = {
  params: { id: string }
 searchParams: { [key: string]: string | string[] | undefined }
}

export async function generateMetadata(
 { params, searchParams }: Props,
 parent: ResolvingMetadata
): Promise<Metadata> {
 // read route params
 const id = params.id

 // fetch data
const product = await fetch(`https://.../${id}`).then((res) => res.json())

// optionally access and extend (rather than replace) parent metadata
const previousImages = (await parent).openGraph?.images || []

 return {
  title: product.title,
   openGraph: {
     images: ['/some-specific-page-image.jpg', ...previousImages],
  },
 }
}

export default function Page({ params, searchParams }: Props) {}

我看到的问题是，在同一页面上，我从远程后端获取动态元数据，我必须获取相同的数据以显示在页面上。事实上，我必须调用 api 两次才能首先获取元数据，然后再获取页面的数据。这是正常的，还是我遗漏了文档中的某些内容？

从逻辑上看，应该有一种方法可以共享从远程 api 获取的数据以用于元数据和页面。有人有想法吗？

Answer 1

NextJS 会自动对相似的获取请求进行分组，并仅将一个请求发送到服务器。正如他们的文档中所述

默认情况下，使用 fetch 的数据请求会被缓存。您可以使用 fetch 的 cache 和 next.revalidate 选项来配置缓存行为。

以及这里指出：

如果您需要在树中的多个组件中使用相同的数据（例如当前用户），则不必全局获取数据，也不必在组件之间转发 props。相反，您可以在需要数据的组件中使用 fetch 或 React 缓存，而不必担心对同一数据发出多个请求的性能影响。这是可能的，因为获取请求会自动记忆

嗯是的。不用担心有 2 个单独的fetch请求 one inPage和 one in generateMetadata。