リクエスト時データ取得

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

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

getServerSideProps の使用

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

export async function getServerSideProps(context) {
  return {
    props: {
      // コンポーネント用の props
    },
  };
}

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

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

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

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

• 外部データを必要としないページの部分を静的に生成（プリレンダリング）します
• ページが読み込まれたら、クライアント側で 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 に関する詳細な情報は、データ取得ドキュメントをご覧ください。