Twi*_*Tea 15 node.js reactjs next.js nextjs-dynamic-routing next.js13
考虑以下服务器端组件，它是应用程序目录中某个页面 (page.js) 的一部分，代表一个人：
export default async function Person({ params }) {
const person = await getPerson(params.id);
return (
<h1> {person.name} </h1>
<p> {person.bio} </p>
)
}
显然，这里的目的是动态呈现新页面，其想法是 URL 看起来像/person/{id}，其中 ID 是每个人的唯一 ID。
我遇到的问题是我需要为页面设置元数据。例如，我希望标题为person.name，描述为person.description。根据我所读到的内容，在 NextJS 13 中使用 app 目录执行此操作的唯一方法是使用generateMetadata，它看起来像这样：
export async function generateMetadata({ params }) {
const person = await getPerson(params.id);
return {
title: person.name,
description: person.description
}
}
我相信您现在可以看到这个问题：我需要getPerson在同一页面中发出完全相同的请求 ( ) 两次。据我所知，没有办法在generateMetadata页面组件之间传递数据。
该<Head>组件next/head似乎是理想的解决方案，但它似乎不适用于 NextJS 13 的应用程序目录。
我在这里错过了一些非常明显的东西吗？或者这绝对是 Next 开发人员的巨大疏忽？
Fab*_*tis 11
如果您调用的函数在内部调用 fetch，Next.js 会自动删除重复数据，可以在此处的官方文档中阅读。
如果您直接调用数据库或使用 fetch 替代方案（如 axios），如所解释的，您可以使用 Reacts 新cache()函数来删除对不会被 Next.js 自动删除重复的逻辑的调用。更多内容可以在此处的官方文档中找到
import { cache } from 'react'
export const getPerson = cache(async () => {
// your logic ...
});
尽管该getPerson()函数被调用两次，但在页面和元数据生成器内部，只会调用一次。这是因为该函数被包装在 中cache()，因此第二个请求可以重用第一个请求的结果。