Next.js SSR中如何减少generateMetadata与Page的重复数据库调用？

核心方案：用React的cache()函数缓存数据查询逻辑 #

这是Next.js 13+ App Router下官方推荐的优化方式，因为generateMetadata和服务器组件都运行在服务端，cache()可以让相同参数的函数调用复用查询结果，彻底避免重复数据库请求。

实现步骤：

1. 把你的数据获取函数用cache()包裹，确保相同参数的调用会复用缓存结果
2. 在generateMetadata和Page组件中直接调用这个缓存后的函数

代码示例：

import { cache } from 'react';

// 用cache包裹数据查询函数
const getPostBySlug = cache(async (slug: string) => {
  // 替换为你的实际数据库查询逻辑
  const post = await db.post.findUnique({
    where: { slug },
  });
  return post;
});

// 生成元数据
export async function generateMetadata({ params }: { params: { slug: string } }) {
  const post = await getPostBySlug(params.slug);
  return {
    title: post?.title,
    description: post?.excerpt,
  };
}

// 页面组件
export default async function Post({ params }: { params: { slug: string } }) {
  const post = await getPostBySlug(params.slug);
  
  if (!post) return <div>Post not found</div>;
  
  return (
    <article>
      <h1>{post.title}</h1>
      <div>{post.content}</div>
    </article>
  );
}

原理说明 #

cache()会为函数的每个唯一参数组合缓存Promise结果，当generateMetadata和Page组件先后调用getPostBySlug时，第二次调用会直接复用第一次的查询结果，不会触发新的数据库请求。

补充说明 #

官方示例中出现两次调用是为了演示基础用法，并非最优实践。在实际项目中，用cache()是最简洁且符合官方推荐的优化方案。

内容的提问来源于stack exchange，提问作者Quan-Lai