Next.js 14中如何在UI中复用generateMetadata()生成的title？

把数据获取逻辑抽成可复用的独立函数，然后在generateMetadata和页面组件里分别调用这个函数即可。Next.js的App Router会自动缓存服务器端的fetch请求，同一个请求只会发起一次，不会重复调用接口。

具体步骤如下：

1. 抽离复用的数据获取函数
   创建一个单独的函数来获取产品数据，方便在多个地方复用：

   async function getProductBySlug(slug: string) {
     const res = await fetch(`你的产品接口地址/${slug}`);
     if (!res.ok) {
       throw new Error('获取产品信息失败');
     }
     return res.json();
   }
   

2. 修改generateMetadata函数
   调用上面的复用函数来获取产品数据：

   export async function generateMetadata(
     { params }: Props,
     parent: ResolvingMetadata
   ): Promise<Metadata> {
     const product = await getProductBySlug(params.slug);
     return {
       title: product.title,
     };
   }
   

3. 在页面组件中复用数据
   在页面组件里同样调用这个复用函数，直接使用返回的product.title渲染UI：

   export default async function ProductPage({ params }: Props) {
     const product = await getProductBySlug(params.slug);
     
     return (
       <div>
         <h1>{product.title}</h1>
         {/* 其他产品相关内容 */}
       </div>
     );
   }
   

这样做的好处：

• 避免重复编写数据获取逻辑，代码更简洁易维护
• 借助Next.js的请求缓存机制，确保同一个接口只会被调用一次，不会产生额外的请求开销

内容的提问来源于stack exchange，提问作者ffsdfdfadf