リクエスト時のデータフェッチ

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

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

getServerSidePropsの使用

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

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

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

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

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

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

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

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

SWR

Next.jsの開発チームは、データフェッチ用のReactフックであるSWRを作成しました。クライアント側でデータをフェッチする場合は、これを強くお勧めします。キャッシュ、再検証、フォーカストラッキング、インターバルでの再フェッチなどを処理します。ここでは詳細を説明しませんが、使用例を次に示します。

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>;
}

詳細については、SWRドキュメントをご覧ください。

以上です！

次のレッスンでは、ダイナミックルーティングを使用して各ブログ記事のページを作成します。

繰り返しになりますが、getStaticPropsとgetServerSidePropsに関する詳細情報は、データフェッチのドキュメントで確認できます。