bounty将在5天内到期。此问题的答案有资格获得+50声望奖励。Krusty the Clown希望引起更多关注这个问题。
考虑以下服务器端组件,它是app目录中某个页面(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
和页面组件之间传递数据。
来自next/head
的<Head>
组件似乎是理想的解决方案,但它似乎不能在NextJS 13的应用程序目录中工作。
我是不是错过了什么很明显的东西?或者这是Next开发人员的一个绝对重大的疏忽?
1条答案
按热度按时间szqfcxe21#
如果你调用的函数在内部调用fetch,它会被Next.js自动删除重复数据,可以在这里的官方文档中阅读。
如果您直接调用数据库或使用fetch替代方案(如axios),则可以使用Reacts新的
cache()
函数来消除对Next.js不会自动消除重复的逻辑的重复调用。更多内容可以在这里的官方文档中找到尽管
getPerson()
函数被调用了两次,但在页面和元数据生成器内部,只会进行一次调用。这是因为该函数被 Package 在cache()
中,所以第二个请求可以重用第一个请求的结果。