getServerSideProps
ページから getServerSideProps
(サーバーサイドレンダリング)という関数をエクスポートすると、Next.jsは getServerSideProps
が返すデータを使用して、各リクエストでこのページを事前レンダリングします。頻繁に変更されるデータをフェッチし、最新のデータを表示するようにページを更新したい場合に便利です。
getServerSideProps
で使用するモジュールをトップレベルスコープでインポートできます。使用されたインポートはクライアントサイド用にバンドルされることはありません。これは、データベースからデータをフェッチするなど、getServerSideProps
に直接サーバーサイドコードを記述できることを意味します。
コンテキストパラメータ
context
パラメータは、以下のキーを含むオブジェクトです:
名前 | 説明 |
---|---|
params | ページが動的ルートを使用している場合、params にはルートパラメータが含まれます。ページ名が [id].js の場合、params は { id: ... } のようになります。 |
req | HTTP IncomingMessage オブジェクト。追加の cookies プロパティがあり、文字列キーがクッキーの文字列値にマッピングされるオブジェクトです。 |
res | HTTP レスポンスオブジェクト。 |
query | 動的ルートパラメータを含むクエリ文字列を表すオブジェクト。 |
preview | (非推奨 draftMode ) preview は、ページがプレビューモードの場合は true 、そうでない場合は false です。 |
previewData | (非推奨 draftMode ) setPreviewData によって設定されたプレビューデータ。 |
draftMode | draftMode は、ページがドラフトモードの場合は true 、そうでない場合は false です。 |
resolvedUrl | クライアント遷移のために _next/data プレフィックスを削除し、元のクエリ値を含むリクエスト URL の正規化されたバージョン。 |
locale | 有効なロケールを含みます(有効な場合)。 |
locales | サポートされているすべてのロケールを含みます(有効な場合)。 |
defaultLocale | 設定されたデフォルトロケールを含みます(有効な場合)。 |
getServerSideProps の戻り値
getServerSideProps
関数は、以下のいずれかのプロパティを持つオブジェクトを返す必要があります:
props
props
オブジェクトは、各値がページコンポーネントによって受け取られるキーと値のペアです。シリアライズ可能なオブジェクトである必要があり、渡されたpropsは JSON.stringify
でシリアライズできます。
notFound
notFound
ブール値により、ページは 404
ステータスと 404ページを返すことができます。notFound: true
の場合、以前に正常に生成されたページでも、ページは 404
を返します。これは、作成者によってユーザー生成コンテンツが削除されるようなユースケースをサポートすることを目的としています。
redirect
redirect
オブジェクトにより、内部および外部リソースにリダイレクトできます。{ destination: string, permanent: boolean }
の形状に一致する必要があります。まれに、古い HTTP
クライアントを適切にリダイレクトするために、カスタムステータスコードを割り当てる必要がある場合があります。このような場合、permanent
プロパティの代わりに statusCode
プロパティを使用できますが、両方は使用できません。
バージョン履歴
バージョン | 変更点 |
---|---|
v13.4.0 | App Router が簡略化されたデータフェッチと共に安定版になりました |
v10.0.0 | locale 、locales 、defaultLocale 、notFound オプションが追加されました |
v9.3.0 | getServerSideProps が導入されました |