Next.js App Router 数据库调用优化：单次调用获取所需数据

2024-03-21 04:31:04

优化 Next.js App Router 中的数据库调用：单次调用实现数据获取

简介

在使用 Next.js App Router 构建应用程序时，我们经常需要从数据库获取数据以生成元数据和呈现页面。然而，传统的实现方式可能涉及多次数据库调用，导致效率低下。本文将探索如何通过使用数据预取来优化此过程，从而实现单次数据库调用以获取所需数据。

问题

考虑以下场景：

服务器组件包含 generateMetadata 函数和 Page 组件。
generateMetadata 生成元数据，Page 组件渲染页面。
这两个功能都需要从数据库获取博客数据。
目前需要对数据库进行两次调用，一次用于 generateMetadata，一次用于 Page 组件。

解决方案：数据预取

Next.js 提供了数据预取功能，允许我们在页面渲染之前从服务器获取数据。通过这种方式，我们可以使用单次数据库调用获取博客数据，然后将数据传递给 generateMetadata 函数和 Page 组件。

实施步骤

1. 定义数据预取函数

首先，定义一个数据预取函数来获取博客数据：

export async function getBlogBySlug(slug: string) {
  // 从数据库获取博客数据
}

2. 使用数据预取函数

在 generateMetadata 函数和 Page 组件中使用数据预取函数：

generateMetadata

export async function generateMetadata({ params }: GenerateMetadataProps): Promise<Metadata> {
  const blog = await getBlogBySlug(params.slug);

  // 使用博客数据生成元数据
}

Page

const Page = async ({ params, searchParams }: PageProps) => {
  const { slug } = params;

  const blog = await getBlogBySlug(slug);

  // 使用博客数据渲染页面
};

3. 在 getStaticProps 中调用数据预取函数

在 getStaticProps 函数中调用数据预取函数以在构建时获取数据：

export const getStaticProps: GetStaticProps = async ({ params }) => {
  const { slug } = params;

  const blog = await getBlogBySlug(slug);

  return {
    props: {
      blog,
    },
  };
};