close

API からのデータの取得 Next.js: getStaticProps と getServerSideProps の使用

アプリケーションの開発プロセスにおいて Next.js 、API からのデータの取得は、動的コンテンツを表示するための重要な側面です。 getStaticProps この記事では、ビルド プロセス中に を使用して静的データをフェッチする方法と、 getServerSideProps リクエストごとに API からデータをフェッチする方法 について説明します。

getStaticProps の使用

getStaticProps Next.js は、ビルド プロセス中の静的データのフェッチをサポートする 組み込みメソッドです。 これにより、クエリされたデータを含む静的ページを作成できます。このデータは、アプリケーションのデプロイ前に事前レンダリングされます。 の基本的な使用例を次に示します getStaticProps。 

export async function getStaticProps() {  
  const response = await fetch('https://api.example.com/data');  
  const data = await response.json();  
  
  return {  
    props: {  
      data,  
    },  
  };  
}

上の例では、 fetch API からデータをクエリし、そのデータを props として返します。

getServerSideProps の使用

getServerSideProps Next.js これは、リクエストごとに API からデータをフェッチできるようにする 別のメソッドです。 これにより、コンテンツが常に最新かつ動的になることが保証されます。 使用例を次に示します getServerSideProps。 

export async function getServerSideProps() {  
  const response = await fetch('https://api.example.com/data');  
  const data = await response.json();  
  
  return {  
    props: {  
      data,  
    },  
  };  
}

この getServerSideProps メソッドは、ページに対してリクエストが行われるたびに API からデータをクエリします。

結論

このセクションでは、アプリケーションの API からデータを効率的にフェッチする方法を学習しました Next.js。 getStaticProps と を使用すると getServerSideProps 、アプリケーション内で静的コンテンツと動的コンテンツの両方を柔軟に表示できます。