Next.js でサーバー コンポーネントなどを使用してサーバー側でデータを取得する方法

getStaticProps などを使用した Next.js サーバー側データの取得

問題:
次Django Rest Framework を利用した .js アプリケーション、REST API 結果からのデータ取得データのマッピング時に未定義の値とランタイム エラーが発生します。

説明:
getStaticProps などの Next.js メソッドは、サーバー側のデータ取得用に特別に設計されており、ページ内でのみ効果的に機能します。ディレクトリ。ただし、Next.js の最新バージョンでは、アプリ ディレクトリ内にあるサーバー コンポーネント内でデータを直接フェッチできます。

解決策:
この問題を解決してサーバーを実行するには、最新の Next.js でサイド データを取得するには、次のオプションを検討してください:

サーバーの使用コンポーネント:

• コード スニペットに示すように、コンポーネント本体内にサーバー側のデータ フェッチを実装します。
• このアプローチにより、データ取得のためにヘッダーと Cookie に直接アクセスできます。 .

ルート セグメント構成の使用 (データベース用)インタラクション):

• 必要な存続期間 (10 秒など) でデータをキャッシュするようにルート セグメントを構成するか、キャッシュを完全に無効にします。
• このメソッドにより、データのフェッチとを使用したデータベースとの直接対話を含むキャッシュ戦略ORM.

コード スニペット (サーバー コンポーネント):

// page.js
export default async function Page() {
  const staticData = await fetch(`https://...`, { cache: "force-cache" });
  const dynamicData = await fetch(`https://...`, { cache: "no-store" });

  return "...";
}

コード スニペット (ルート セグメント構成):

// layout.js OR page.js OR route.js
export const revalidate = 10;

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

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

作成者これらのソリューションを実装すると、サーバー コンポーネントを使用している場合でも、サーバーから効果的にデータを取得し、Next.js 内でキャッシュ戦略を処理できます。

以上がNext.js でサーバー コンポーネントなどを使用してサーバー側でデータを取得する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。