Next.js 13 以降でサーバー側でデータを取得するにはどうすればよいですか?

Next.js でのサーバー側のデータの取得

Next.js 13 以降でのサーバー側のデータの取得

Next.js の最近のバージョンでは、「getStaticProps」と「getServerSideProps」メソッドは段階的に廃止され、開発者は最新の Next.js アプリケーションでサーバー側でデータをフェッチする方法を疑問に思っています。

サーバー コンポーネントの紹介

Next.js について13 以降では、サーバー コンポーネントの導入により、サーバー側でデータをフェッチする新しい方法が提供されます。従来のページ コンポーネントとは異なり、サーバー コンポーネントは、コンポーネント本体内のデータ取得ロジックに直接アクセスできます。

サーバー コンポーネントの例

次のコード スニペットは、データを取得する方法を示しています。サーバーコンポーネント内のサーバー側:

export default async function Component() {
  // Fetch server-side data with caching options
  const staticData = await fetch(`https://...`, { cache: "force-cache" });
  const dynamicData = await fetch(`https://...`, { cache: "no-store" });
  const revalidatedData = await fetch(`https://...`, { next: { revalidate: 10 } });

  return "...";
}

ルートセグメント構成

サーバー コンポーネントに加えて、Next.js はルート セグメント構成を提供します。これにより、開発者は、サーバー側のデータ取得中であっても、特定のルートまたはページのキャッシュ動作を制御できます。

ルート セグメント構成の例

この例は、構成方法を示しています。ルートセグメント設定を使用したルート固有のキャッシュ:

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

export const revalidate = 10; // Revalidate every 10s
// ...

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

以上がNext.js 13 以降でサーバー側でデータを取得するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。