リクエスト時のデータ取得

最初のアプリを作成する

検索エンジン最適化

0 ポイント

プリレンダリングとデータフェッチ

ビルド時ではなく、リクエスト時にデータを取得する必要がある場合は、サーバーサイドレンダリングを試すことができます。

サーバーサイドレンダリングを使用するには、ページからgetServerSidePropsを、getStaticPropsの代わりにエクスポートする必要があります。

`getServerSideProps`の使用

getServerSidePropsのスターターコードを以下に示します。これはブログの例では必要ないため、実装はしません。

export async function getServerSideProps(context) {
  return {
    props: {
      // props for your component
    },
  };
}

getServerSidePropsはリクエスト時に呼び出されるため、そのパラメータ（context）にはリクエスト固有のパラメータが含まれます。

getServerSidePropsは、リクエスト時にデータを取得する必要があるページをプリレンダリングする場合にのみ使用する必要があります。サーバーはすべてのリクエストで結果を計算する必要があり、結果は追加の設定なしではCDNでキャッシュできないため、最初のバイトまでの時間（TTFB）はgetStaticPropsよりも遅くなります。

クライアントサイドレンダリング

データをプリレンダリングする必要がない場合は、次の戦略（クライアントサイドレンダリングと呼ばれます）を使用することもできます。

外部データを必要としないページのパーツを静的に生成（プリレンダリング）します。
ページがロードされたら、JavaScriptを使用してクライアントから外部データをフェッチし、残りのパーツに入力します。

このアプローチは、たとえばユーザーダッシュボードページに適しています。ダッシュボードはプライベートなユーザー固有のページであるため、SEOは関係なく、ページをプリレンダリングする必要はありません。データは頻繁に更新されるため、リクエスト時のデータフェッチが必要です。

SWR

Next.jsの背後にあるチームは、SWRと呼ばれるデータフェッチ用のReactフックを作成しました。クライアント側でデータをフェッチする場合は、強くお勧めします。キャッシュ、再検証、フォーカストラッキング、一定間隔での再フェッチなどを処理します。ここでは詳細を扱いませんが、使用例を以下に示します。

import useSWR from 'swr';

function Profile() {
  const { data, error } = useSWR('/api/user', fetch);

  if (error) return <div>failed to load</div>;
  if (!data) return <div>loading...</div>;
  return <div>hello {data.name}!</div>;
}