getServerSideProps

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

例

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

pages/index.tsx

TypeScript

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

`getServerSideProps`をいつ使用すべきか

個人化されたユーザーデータ、またはリクエスト時にのみ知り得る情報に依存するページをレンダリングする必要がある場合は、getServerSidePropsを使用してください。例えば、authorizationヘッダーや位置情報などです。

リクエスト時にデータを取得する必要がない、またはデータをキャッシュしてプリレンダリングされたHTMLを使用したい場合は、getStaticPropsの使用をお勧めします。

動作

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

補足:

getServerSideProps APIリファレンスで、getServerSidePropsと共に使用できるパラメータとpropsを確認できます。

next-code-elimination toolを使用して、Next.jsがクライアント側のバンドルから何を削除するかを確認できます。

// この値は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がより適しているかを検討することをお勧めします。

getServerSideProps

例

`getServerSideProps`をいつ使用すべきか

動作

エラー処理

エッジケース

サーバーサイドレンダリング（SSR）とキャッシング

getServerSideProps

例

getServerSidePropsをいつ使用すべきか

動作

エラー処理

エッジケース

サーバーサイドレンダリング（SSR）とキャッシング

`getServerSideProps`をいつ使用すべきか