NextJS13+ App Router动态元数据与页面数据重复请求问题

这种重复发起API请求的情况并非最优实践，Next.js提供了明确的方案来实现数据复用，避免不必要的重复请求。

核心解决方案：利用Next.js的请求缓存机制 #

Next.js对fetch API有内置的缓存优化，默认会缓存相同URL和参数的请求结果，服务器端的多次调用实际只会触发一次真实的API请求。你可以通过提取公共数据获取函数来实现复用：

步骤1：提取公共数据获取函数 #

// 公共函数：获取产品数据
async function getProduct(id: string) {
  const res = await fetch(`https://.../${id}`);
  // 可选：处理请求失败情况
  if (!res.ok) throw new Error('获取产品数据失败');
  return res.json();
}

注：fetch默认使用cache: 'force-cache'策略，可显式声明以明确缓存行为；如果需要实时数据，可改为cache: 'no-store'（但此时会失去缓存复用能力）。

步骤2：在generateMetadata中调用函数 #

import { Metadata, ResolvingMetadata } from 'next';

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

export async function generateMetadata(
  { params }: Props,
  parent: ResolvingMetadata
): Promise<Metadata> {
  const product = await getProduct(params.id);
  const previousImages = (await parent).openGraph?.images || [];

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

步骤3：在页面组件中调用同一函数 #

export default async function Page({ params }: Props) {
  const product = await getProduct(params.id);
  
  return (
    <div className="product-page">
      <h1>{product.title}</h1>
      {/* 渲染产品详情内容 */}
    </div>
  );
}

进阶：手动精细控制缓存 #

如果需要更灵活的缓存规则（比如自定义缓存有效期、缓存键），可以使用unstable_cache包装数据获取函数：

import { unstable_cache } from 'next/cache';

// 手动缓存产品数据，1小时后重新验证
const getProduct = unstable_cache(
  async (id: string) => {
    const res = await fetch(`https://.../${id}`);
    return res.json();
  },
  ['product-data'], // 缓存标识前缀
  { revalidate: 3600 } // 缓存有效期（秒）
);

关键注意事项 #

• 确保两次调用的请求URL、参数完全一致，缓存才能生效
• 页面组件必须是Server Component（Next.js 13+ App Router默认就是），客户端组件的fetch会在浏览器发起，无法复用服务器端缓存
• 如果业务需要实时数据，可选择cache: 'no-store'或revalidate: 0，但此时确实会触发两次请求，需权衡业务需求与性能

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