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ルートを呼び出す必要はありません。代わりに、getServerSidePropsの内部から直接CMS、データベース、またはその他のサードパーティAPIを呼び出すことができます。

補足：

getServerSidePropsで使用できるパラメーターとpropsについては、getServerSideProps APIリファレンスを参照してください。

クライアント側のバンドルから何が削除されるかを確認するには、next-code-elimination toolを使用できます。

// この値は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`をいつ使用すべきか