logoNext.js 日本語
ドキュメントブログ学習
はじめに/アプリケーションの構築/データフェッチ/getServerSideProps

getServerSideProps

getServerSideProps は、リクエスト時にデータを取得しページのコンテンツをレンダリングするために使用できる Next.js の関数です。

使用例

getServerSideProps はページコンポーネントからエクスポートすることで使用できます。以下の例では、getServerSideProps でサードパーティ API からデータを取得し、そのデータを props としてページに渡す方法を示しています:

import type { InferGetServerSidePropsType, GetServerSideProps } from 'next'

type Repo = {
  name: string
  stargazers_count: number
}

export const getServerSideProps = (async () => {
  // 外部APIからデータを取得
  const res = await fetch('https://api.github.com/repos/vercel/next.js')
  const repo: Repo = await res.json()
  // データをpropsとしてページに渡す
  return { props: { repo } }
}) satisfies GetServerSideProps<{ repo: Repo }>

export default function Page({
  repo,
}: InferGetServerSidePropsType<typeof getServerSideProps>) {
  return (
    <main>
      <p>{repo.stargazers_count}</p>
    </main>
  )
}
export async function getServerSideProps() {
  // 外部APIからデータを取得
  const res = await fetch('https://api.github.com/repos/vercel/next.js')
  const repo = await res.json()
  // データをpropsとしてページに渡す
  return { props: { repo } }
}

export default function Page({ repo }) {
  return (
    <main>
      <p>{repo.stargazers_count}</p>
    </main>
  )
}

getServerSideProps を使用すべきケース

ユーザーごとに異なるデータや、リクエスト時にしかわからない情報（authorization ヘッダーや地理位置情報など）に依存するページをレンダリングする必要がある場合、getServerSideProps を使用すべきです。

リクエスト時にデータを取得する必要がなかったり、データと事前レンダリングされた HTML をキャッシュしたい場合は、getStaticProps の使用を検討してください。

動作仕様

  • getServerSideProps はサーバー上で実行されます
  • getServerSideProps は ページ からのみエクスポートできます
  • getServerSideProps は JSON を返します
  • ユーザーがページにアクセスすると、getServerSideProps がリクエスト時にデータを取得し、そのデータを使用してページの初期 HTML がレンダリングされます
  • ページコンポーネントに渡される props は、初期 HTML の一部としてクライアント側で確認できます。これはページを正しくハイドレートするためです。クライアント側で利用可能にしてはいけない機密情報を props に含めないように注意してください
  • ユーザーが next/link や next/router 経由でページにアクセスした場合、Next.js はサーバーに API リクエストを送信し、そこで getServerSideProps が実行されます
  • getServerSideProps を使用する場合、データ取得のために Next.js の API ルート を呼び出す必要はありません。この関数はサーバー上で実行されるため、CMS やデータベース、その他のサードパーティ API を直接呼び出すことができます

補足情報:

エラー処理

getServerSideProps 内でエラーが発生した場合、pages/500.js ファイルが表示されます。500 ページの作成方法については、500 ページ のドキュメントを参照してください。開発中はこのファイルは使用されず、代わりに開発用のエラーオーバーレイが表示されます。

特殊ケース

サーバーサイドレンダリング (SSR) でのキャッシュ

getServerSideProps 内でキャッシュヘッダー (Cache-Control) を使用することで、動的なレスポンスをキャッシュできます。例えば stale-while-revalidate を使用する方法があります。

// この値は10秒間新鮮とみなされます (s-maxage=10)
// 次の10秒以内にリクエストが繰り返されると、以前にキャッシュされた値が使用されます
// 59秒以内にリクエストが繰り返されると、キャッシュされた値は古くなりますが、レンダリングには使用されます (stale-while-revalidate=59)
//
// バックグラウンドで、キャッシュを新しい値で更新するための再検証リクエストが行われます
// ページを更新すると、新しい値が表示されます
export async function getServerSideProps({ req, res }) {
  res.setHeader(
    'Cache-Control',
    'public, s-maxage=10, stale-while-revalidate=59'
  )

  return {
    props: {},
  }
}

ただし、cache-control を使用する前に、getStaticProps と ISR (増分的静的再生成) の組み合わせがユースケースに適しているかどうかを検討することをお勧めします。

フォームとデータ変更

Next.js を使用してフォーム送信とデータ変更を処理する方法を学びましょう。

クライアントサイドでのデータ取得

クライアントサイドでのデータ取得について学び、キャッシュ、再検証、フォーカストラッキング、インターバルでの再取得などを処理するデータ取得用React Hookライブラリ「SWR」の使用方法を確認します。