リクエスト時にデータを取得する

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

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

getServerSidePropsを使用する

ブログの例では不要なため、getServerSidePropsのスターターコードは次のようになります。実装しません。

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

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

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

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

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

• 外部データを必要としないページのパーツを静的に生成（事前レンダリング）します。
• ページがロードされたときに、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の詳細については、データ取得ドキュメントで確認できます。