Next.js v13中如何避免重复获取同一数据？

你可以通过React.cache缓存数据获取逻辑，让同一个请求周期内的两次调用复用同一份查询结果，避免重复执行数据库请求。

具体实现步骤 #

1. 用React.cache包裹数据库连接和查询逻辑，确保相同参数的调用会复用缓存结果
2. 在generateMetadata和Page组件中统一调用缓存后的函数

修改后的代码示例：

import { cache } from 'react';

// 缓存数据库连接逻辑，避免重复创建连接
const connectToPostgres = cache(async () => {
  // 你的原有数据库连接逻辑
});

// 缓存查询逻辑，相同slug只会执行一次查询
const getQuestion = cache(async (questionSlug: string) => {
  const sql = await connectToPostgres();
  return findQuestion(sql, questionSlug);
});

export const generateMetadata = async ({
  params: { questionSlug },
}: Props): Promise<Metadata> => {
  const question = await getQuestion(questionSlug);

  if (!question) {
    return {};
  }

  return {
    alternates: {
      canonical: `https://ray.run/questions/${question.slug}`,
    },
    title: question.question,
  };
};

const Page = async ({ params: { questionSlug } }: Props) => {
  const question = await getQuestion(questionSlug);

  if (!question) {
    return notFound();
  }

  // ... 页面渲染逻辑
};

原理说明 #

React.cache会为函数参数生成唯一缓存键，在同一个服务器请求周期（或客户端渲染的同一次页面加载）中，相同参数的函数调用会直接返回之前缓存的Promise结果，不会重复执行数据库查询和连接操作。

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