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 のみに依存する場合に発生する未定義データの問題に対処できます。