Next.js 中的数据获取障碍：解决未定义的数据

Next.js 提供了多种服务器端数据获取的方法，包括 getStaticProps 和 getServerSideProps。但是，这些方法主要适用于页面文件夹中的页面组件。在 Next.js 13 中，出现了一个称为服务器组件的新概念，允许直接在组件主体内获取数据。

服务器组件：全面的解决方案

服务器组件提供了更灵活的方法数据获取，使开发人员能够：

• 在服务器上获取数据，并可以选择缓存结果，类似于getStaticProps.
• 在每个请求上获取数据，类似于 getServerSideProps。
• 指定自定义重新验证策略。

要使用服务器组件，请将您的组件定义为默认组件导出应用程序目录中的文件。可以使用以下方法在组件体内执行数据获取：

import { headers, cookies } from "next/headers";

export default async function Component({ params, searchParams }) {
  // Cached until manually invalidated
  const staticData = await fetch(`https://...`, { cache: "force-cache" });

  // Refetched on every request
  const dynamicData = await fetch(`https://...`, { cache: "no-store" });

  // Revalidated with a 10-second lifetime
  const revalidatedData = await fetch(`https://...`, { next: { revalidate: 10 } });
}

替代方法

除了服务器组件之外，您还可以使用库获取数据或使用 ORM 直接与数据库交互。在这种情况下，您可以利用路由段配置：

// layout.js OR page.js OR route.js

import prisma from "./lib/prisma";

// Caching options
export const revalidate = 10; // Revalidate every 10s
// OR
export const dynamic = "force-dynamic"; // No caching

async function getPosts() {
  const posts = await prisma.post.findMany();
  return posts;
}

export default async function Page() {
  const posts = await getPosts();
}

通过使用服务器组件或替代方法，您可以在Next.js中高效地获取服务器上的数据，解决仅依赖getStaticProps时遇到的未定义数据的问题。