VIDEO LESSON

getServerSidePropsの使い方：リクエストごとにページを生成するの解説動画

再生時間 7:23動画を別のタブで開く ↗

動画の字幕・文字起こしを読む

再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。

0:00こんにちは。
0:00今回は、ゲットサーバーサイドプロップスの使い方です。
0:04ページズルーターでは、ページを開くたびにサーバーでデータを用意してから画面を作ることができます。
0:12その入口になるのが、このゲットサーバーサイドプロップスです。
0:16リクエストが届いたその瞬間の情報を読み取り、検証して、ページへプロップスとして渡します。
0:23表示する名前や生成時刻のように、アクセスごとに変わる値を扱うのが今回のテーマです。
0:29記事のコードを読みながら、引数のコンテキストと、三つの戻り値の選び方まで押さえます。
0:35この関数の名前は、サーバー側でプロップスを用意する、という役割そのものを表しています。
0:42まず前提です。
0:42ゲットサーバーサイドプロップスは、ページズルーターで使うデータ取得の関数です。
0:48ページは、ページズというディレクトリーの中に置きます。
0:51アプリルーターのアプリへ同じファイルを移しても、データ取得やルーティングの決まりは引き継がれません。
0:58ルーターごとに仕組みが別だと考えてください。
1:01この関数は、ビルド時ではなく、リクエストのたびにサーバーで実行されます。
1:06そのため、静的なファイルだけを配信する構成では動かせません。
1:10プロジェクトがどちらのルーターか、配信方式は何かを、先に確認しておきましょう。
1:16特に、アプリルーターの記事と行き来しながら学んでいる人は、ファイルの置き場所がどちらのルーターのものかで判断すると迷いません。
1:24引数と戻り値を整理します。
1:26この関数は、コンテキストという一つのオブジェクトを受け取ります。
1:31その中には、ユーアールエルの検索条件を読むクエリ、動的ルートの値を読むパラムス、
1:37リクエストヘッダーを読むための情報、レスポンスヘッダーを書き換えるための情報などが入っています。
1:44戻り値は三つの形から一つを選びます。
1:46通常はプロップスで値をページへ渡し、データがなければノットファウンド、移動させたい場合はリダイレクトを返します。
1:55ここで大切なのは、プロップスは閲覧者のブラウザーへ送られるという点です。
2:00秘密の値を含めないよう、渡す直前に中身を選んでください。
2:04記事のコードの前半、データ取得の部分です。
2:06ファイルは、ページズ配下のグリーティング・ティーエスエックスです。
2:10まず、名前と生成時刻を文字列とするプロップスの型を定義し、ゲットサーバーサイドプロップスにその型を指定します。
2:17引数からはクエリとレスを取り出します。
2:19クエリの名前が、四十文字以内の文字列であればそのまま使い、それ以外はゲストに置き換えます。
2:25最後に、レスポンスヘッダーへキャッシュコントロールを設定し、名前と現在時刻をプロップスとして返します。
2:31サーバー側の処理は、ここで完結します。
2:33コードの後半、ページ本体です。
2:36グリーティングというコンポーネントが、プロップスとして名前と生成時刻を受け取ります。
2:42型は、インファーゲットサーバーサイドプロップスタイプという仕組みで、ゲットサーバーサイドプロップスから自動で引き継ぎます。
2:52データ取得側の型を変えれば、ページ側の型も一緒に変わるため、両方を手で直す必要がありません。
2:59画面では、こんにちは、名前さん、という見出しと、生成時刻の段落を表示します。
3:05ページ本体は受け取った値を表示するだけに徹し、検証や時刻の生成はサーバー側の関数が担当します。
3:12実行結果を確認します。
3:14グリーティングに、名前イコールハナコという検索条件を付けて開くと、見出しにハナコという名前が表示されます。
3:22そして、ページを再読み込みすると、生成時刻が新しい値に変わります。
3:26ビルド時に一度だけ作るページとは違い、リクエストのたびにサーバーで作り直している証拠です。
3:33一方、名前を指定しなかった場合、名前を繰り返し指定した場合、四十一文字以上の長い名前の場合は、
3:38どれもゲストと表示されます。
3:42不正な入力をそのまま画面へ出さず、安全な既定値へ寄せる作りになっています。
3:47処理の順序は、リクエストの受付、クエリの検証、ヘッダーの設定、プロップスの返却、
3:51ページの表示、という流れです。
3:56クエリの検証について、もう少し掘り下げます。
3:59クエリの名前は、いつも単なる文字列とは限りません。
4:03指定がなければ未定義、同じ名前を繰り返せば配列になります。
4:08ユーアールエルは誰でも書き換えられる外部入力なので、タイプスクリプトの型指定だけで安全だと判断しないことが大切です。
4:17記事のコードは、文字列であることと、四十文字以内であることを実行時に確かめてから使っています。
4:24このように、形と長さの両方を確認するのが基本です。
4:28条件に合わない入力は、エラー画面ではなく、ゲストという既定値で受け止めています。
4:35検証を通過した値だけをプロップスへ入れることで、ページ本体は入力の心配をせずに表示へ専念できます。
4:42つまずきやすい点の一つ目は、キャッシュです。
4:46ログインした人ごとに違う内容を、共有キャッシュへ保存してしまうと、別の人の画面へ返してしまう事故につながります。
4:55そこで記事のコードは、レスポンスヘッダーにプライベート、ノーストアを明示し、
5:00この応答を共有させず、保存もさせないようにしています。
5:06ただし、ヘッダーを付けただけでは本人確認にはなりません。
5:10誰がログインしているかの検証は、別途必要です。
5:14また、プロップスは閲覧者へ送られるため、データベースの接続情報のような秘密値を紛れ込ませないでください。
5:23使い分けを整理します。
5:24内容がビルド時に決まるページなら、ゲットスタティックプロップスによる静的生成の方が、
5:28速く、安く配信できます。
5:31リクエストごとの値が必要なときだけ、ゲットサーバーサイドプロップスを選ぶのが基本です。
5:37また、この関数はサーバーの実行を必要とするため、アウトプット・エクスポートで作った静的ファイルだけを配信する構成では使えません。
5:46ネクストジェイエスのサーバーか、別のエーピーアイを用意してください。
5:51なお、同じアプリのサーバー内でデータベースを読めるなら、自分のエイチティーティーピーエーピーアイを経由せず、
5:56共通のサーバー関数を直接使う方法もあります。
6:01配信の方式は公開後に変えにくいため、ページごとに、ビルド時に決まるのか、
6:05リクエスト時に決まるのかを先に分けておきましょう。
6:09確認課題です。
6:10名前の省略、空文字、複数の名前、四十一文字以上という四つのパターンを試してください。
6:16特に空文字は、文字列で長さも条件を満たすため、そのまま通ることをコードと見比べて確認します。
6:23個別のユーザー向けページへ応用する場合は、ユーアールエルの名前を本人確認として使わず、
6:27セッションを検証してください。
6:31確認は、開発サーバーだけでなく、本番用ビルドと公開先でも行います。
6:35ユーアールエルを直接開く場合と、画面内のリンクから移る場合を分けると、型だけでは防げない入力の問題が見つかります。
6:43まとめです。
6:44ゲットサーバーサイドプロップスは、ページズルーターで、リクエストのたびにサーバーで実行されるデータ取得の関数です。
6:52コンテキストからクエリなどを読み、検証してから、プロップスとしてページへ渡します。
6:58戻り値は、プロップス、ノットファウンド、リダイレクトの三つから選びます。
7:03個人向けの応答にはプライベート、ノーストアを明示し、静的な配信だけの構成では使えない点にも注意してください。
7:10迷ったときは、リクエストの情報が必要かどうかを基準に選んでください。
7:15これでゲットサーバーサイドプロップスは完了です。
7:18お疲れさまでした。
7:20次回はゲットスタティックパスを学びます。

日本語字幕をダウンロード（WebVTT）

この動画で学べること

getServerSidePropsでリクエストごとの値をページへ渡す方法を解説します。queryの検証、レスポンスヘッダー、SSGとの違いをコードで確認します。

解説記事・サンプルコードを読む：getServerSidePropsの使い方：リクエストごとにページを生成する →