︙

getServerSideProps

getServerSidePropsは、fetch データと render ページの内容を request 時間に行うことができる、Next.js の関数です。

Example

getServerSidePropsを使用するには、ページの Component からそれを export します。以下の例は、getServerSideProps内で 3rd パーティの API から fetch データを取得し、そのデータをページの props として渡す方法を示しています：

pages/index.tsx

import type { InferGetServerSidePropsType, GetServerSideProps } from 'next'

type Repo = {
  name: string
  stargazers_count: number
}

export const getServerSideProps = (async () => {
  // Fetch data from external API
  const res = await fetch('https://api.github.com/repos/vercel/next.js')
  const repo: Repo = await res.json()
  // Pass data to the page via props
  return { props: { repo } }
}) satisfies GetServerSideProps<{ repo: Repo }>

export default function Page({
  repo,
}: InferGetServerSidePropsType<typeof getServerSideProps>) {
  return (
    <main>
      <p>{repo.stargazers_count}</p>
    </main>
  )
}

pages/index.js

export async function getServerSideProps() {
  // Fetch data from external API
  const res = await fetch('https://api.github.com/repos/vercel/next.js')
  const repo = await res.json()
  // Pass data to the page via props
  return { props: { repo } }
}

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

When should I use `getServerSideProps`?

getServerSidePropsは、パーソナライズされたユーザーデータに依存するページを render する必要がある場合、または request の時点でのみ知ることができる情報に基づいている場合に使用する必要があります。例えば、authorization headers やジオロケーションです。

データを fetch する必要が request 時にない、またはデータを cache し、予めレンダリングされた HTML を好むなら、getStaticPropsの使用をお勧めします。

Behavior

getServerSidePropsは server 上で実行されます。
getServerSidePropsはページからのみ export できます。
getServerSidePropsは JSON を返します。
ユーザーがページを訪れると、getServerSidePropsが request の時間に fetch でデータを取得するために使用され、そのデータはページの初期 HTML を render するために使用されます。
props は、ページの component に渡され、初期の HTML の一部として client 上で表示することができます。これは、ページがhydrated されるのを正しく許可するためです。 props に client で利用可能であってはならない機密情報を渡さないように注意してください。
ユーザーがnext/linkまたはnext/routerを経由してページを訪れると、Next.js は server へ API request を送信し、getServerSidePropsが実行されます。
getServerSidePropsを使用する際、データを fetch するために Next.js のAPI Routeを呼び出す必要はありません。なぜなら、その関数は server 上で実行されるからです。代わりに、CMS、データベース、または他のサードパーティの API をgetServerSidePropsの内部から直接呼び出すことができます。

Good to know:

getServerSideProps API referenceを参照して、getServerSidePropsで使用できるパラメータと props について確認してください。

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

Error Handling

getServerSideProps内で error がスローされた場合、pages/500.jsファイルが表示されます。それの作成方法については、500 ページのドキュメンテーションをチェックしてみてください。 development 中は、このファイルは使用されず、代わりに development error のオーバーレイが表示されます。

Edge Cases

Edge Runtime

getServerSidePropsはServerless および Edge Runtimesの両方で使用でき、また両方で props を設定することもできます。

しかし、現在の Edge Runtime では、response object へのアクセスができません。つまり、例えば getServerSideProps で cookies を追加することができないということです。 response object へのアクセスを持つには、 default runtime である Node.js runtime を引き続き使用するべきです。

configを修正して、ページごとに runtime を明示的に設定することができます。例えば：

pages/index.js

export const config = {
  runtime: 'nodejs', // or "edge"
}

export const getServerSideProps = async () => {}

Server-Side Rendering ( SSR )によるキャッシング

getServerSidePropsの中でCache-Control(キャッシュ制御)という headers を使って、cache dynamic な Response をキャッシュすることができます。例えば、stale-while-revalidate を使用します。

// This value is considered fresh for ten seconds (s-maxage=10).
// If a request is repeated within the next 10 seconds, the previously
// cached value will still be fresh. If the request is repeated before 59 seconds,
// the cached value will be stale but still render (stale-while-revalidate=59).
//
// In the background, a revalidation request will be made to populate the cache
// with a fresh value. If you refresh the page, you will see the new value.
export async function getServerSideProps({ req, res }) {
  res.setHeader(
    "Cache-Control",
    "public, s-maxage=10, stale-while-revalidate=59"
  );

  return {
    props: {},
  };
}

しかし、cache-controlに手を伸ばす前に、我々はあなたのユースケースにgetStaticPropsとISRがより適しているかどうかを確認することをお勧めします。