未定義データを避けるために Next.js 13 でデータを効率的にフェッチするにはどうすればよいですか?

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 のみ。

以上が未定義データを避けるために Next.js 13 でデータを効率的にフェッチするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。