VIDEO LESSON

Next.jsのSSR入門：getServerSideProps・キャッシュ・配信の注意点の解説動画

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

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

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

0:00こんにちは。
0:00今回は、ネクストジェイエスのエスエスアール入門です。
0:05ページズルーターのゲットサーバーサイドプロップスを使い、リクエストごとにページを生成する方法を、
0:10タイプスクリプトの例で学びます。
0:15エスエスアールは、アクセスが来たタイミングでサーバーがエイチティーエムエルを作る仕組みです。
0:22その時点の最新情報や、利用者に応じた内容を画面へ渡せます。
0:27一方で、キャッシュの共有範囲や、プロップスに含める情報には注意が必要です。
0:33前提と基本の流れから、配信の注意点まで順に確認していきます。
0:37まずは全体像をつかみ、細部へ進みましょう。
0:41まず前提です。
0:42この記事はタイプスクリプトとページズルーターを使い、ネクストジェイエスを実行するサーバーがある構成を前提にしています。
0:51アウトプット・エクスポートで作る静的サイトには、リクエスト時に動くゲットサーバーサイドプロップスを含められません。
1:00また、アプリルーターでは別のデータ取得方法を使うため、このコードをエスアールシー・アプリ配下へそのまま移さないでください。
1:09エスエスジーが事前に作って配信するのに対し、エスエスアールはリクエストのたびに生成します。
1:16どちらの配信方法がページに合うかを先に決めることが出発点です。
1:21この前提の違いが、使える機能の判断にもつながります。
1:25最初の例は、サーバーで生成した時刻を表示するページです。
1:29ファイルはサーバータイム・ティーエスエックスです。
1:33ゲットサーバーサイドプロップスは非同期関数で、レスポンスへキャッシュコントロールを設定し、
1:39現在時刻をアイエスオー文字列にしてプロップスで返します。
1:44ページコンポーネントは、その文字列を受け取って表示します。
1:48サーバータイムへアクセスし、再取得すると値が変わるのが確認ポイントです。
1:53表示されるのはブラウザーが独自に動かす時計ではなく、レスポンスを作った時点の値です。
2:00リクエストのたびにサーバーで値が作られる、という流れを押さえましょう。
2:05プロップスの注意点です。
2:07ゲットサーバーサイドプロップス自体はサーバー側で実行されますが、返したプロップスはブラウザーへ送られます。
2:15そのため、エーピーアイキーやセッショントークンなど、見せてはいけない情報を含めてはいけません。
2:22サーバーで読めたから安全、とは限らないのです。
2:26また、プロップスはジェイソンとして扱えるデータで返します。
2:30日時はアイエスオー文字列へ変換する、という例の工夫はそのためです。
2:35画面に必要な項目だけに絞り、公開してよいデータだけを返す。
2:40この線引きが、エスエスアールを安全に使う第一歩です。
2:44公開範囲を意識してデータを選ぶ習慣は、他の場面でも役立ちます。
2:49次はユーアールエルの値を使う検索の例です。
2:52サーチ・ティーエスエックスで、スラッシュ・サーチにキューイコール・タイプスクリプト、
2:57のようなユーアールエルを処理します。
3:01ポイントは、クエリの値を文字列と決め付けないことです。
3:05同名のクエリが複数あると配列になる場合もあるため、タイプオブで文字列かどうかを確認し、
3:11文字列なら前後の空白を取り除いて百文字までに切り取ります。
3:16文字列でなければ空文字として扱います。
3:19その検索語で記事タイトルを大文字小文字を区別せずに絞り込み、結果をプロップスで渡します。
3:26入力は必ず検証してから使う、という姿勢が大切です。
3:30ページ側は、検索フォームと、見つかった件数と記事の一覧を表示します。
3:35入力欄には検証済みの検索語が初期値として入り、上限も百文字にそろえてあります。
3:42なお、この例はユーアールエル入力の扱いを学ぶためのもので、小さな固定データの検索自体にエスエスアールが必須という意味ではありません。
3:52データベースを使う場合は、検索部分をサーバー用の取得処理へ置き換えます。
3:58その際、エスキューエルへ文字列を直接連結せず、ライブラリーのパラメーター化されたクエリを使います。
4:06認証が必要なページでは、データ取得の前にセッションとアクセス権限を確認してください。
4:13動作確認は本番モードで行います。
4:15ネクストコンフィグにアウトプット・エクスポートがないサーバー構成で、エヌピーエム・ラン・ビルド、
4:20続いてエヌピーエム・ラン・スタートを実行します。
4:25すでに開発サーバーが同じポートを使っている場合は、先に停止してください。
4:29配信先は、ノードジェイエスを実行するウェブサーバーや、ネクストジェイエスのエスエスアールに対応したホスティングを選びます。
4:38生成された一部のエイチティーエムエルだけを静的サーバーへ転送しても、リクエスト時の処理は再現できません。
4:45配信の仕組みごと用意することが、エスエスアールの前提です。
4:49データ取得の工夫です。
4:50ゲットサーバーサイドプロップスから、同じアプリのエーピーアイルートへエイチティーティーピーでアクセスする必要はありません。
4:59共通の取得関数をサーバー側から直接呼べば、余分な通信を避けられます。
5:04外部エーピーアイを呼ぶ場合は、応答ステータス、タイムアウト、入力値の検証を考慮します。
5:10また、エスエスアールの応答時間には、外部エーピーアイやデータベースの待ち時間がそのまま加わります。
5:16頻繁に変わらない公開記事であれば、エスエスジーの方が構成に合う場合もあります。
5:22エスエスアールにしただけで検索順位や表示速度が必ず改善するわけではない点も覚えておきましょう。
5:28キャッシュの注意点です。
5:30公開情報は条件に応じてキャッシュできますが、利用者別の情報を共有キャッシュへ保存すると、
5:35別の利用者へ情報が渡る危険があります。
5:39ログイン状態に応じたページは、特に慎重に扱います。
5:43この記事の例がプライベート、ノーストアにしているのは、挙動を分かりやすくするためです。
5:49エスエスアールであることだけを根拠に安全だと判断せず、応答ヘッダーと、シーディーエヌなど実際の配信環境の設定を合わせて確認してください。
6:00キャッシュするかどうかではなく、誰と共有してよいか、という範囲の確認が要点です。
6:05共有か個別か、という観点でヘッダーを読み解くことが大切です。
6:10レンダリング時に使えないものにも注意します。
6:13ウィンドウ、ドキュメント、ローカルストレージはサーバーに存在しません。
6:17これらを必要とする処理は、ブラウザーのイベントやエフェクトなどへ分けます。
6:22ページコンポーネントそのものもサーバーで描画される点を忘れないでください。
6:27サーバー側の関数の中で直接触ると、実行時にエラーになります。
6:30もう一つ、エスエスジーとエスエスアールを同じページで併用するために、ゲットスタティックプロップスとゲットサーバーサイドプロップスを同時にエクスポートすることはできません。
6:41ページに必要なデータと配信方法から、どちらか一方を選びます。
6:45最後にまとめです。
6:46エスエスアールでは、ページからゲットサーバーサイドプロップスをエクスポートし、
6:50リクエスト時に取得した値を画面へ渡します。
6:54ユーアールエルなどの入力は型を確認して検証し、認証が必要な場合はデータ取得の前に権限を確認します。
7:00プロップスへ渡した情報はブラウザーへ送られるため、公開してよいデータだけに絞ります。
7:06そして、利用者別の情報を共有キャッシュへ保存しないよう、応答ヘッダーと配信基盤の設定を確認します。
7:12サーバーで生成する利点と、配信の注意点をセットで押さえることが、エスエスアール入門のゴールです。

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

この動画で学べること

Pages RouterのgetServerSidePropsでSSRを実装する方法を解説。リクエスト情報、props、キャッシュ、秘密情報の扱い、静的出力と併用できない理由を確認できます。

解説記事・サンプルコードを読む：Next.jsのSSR入門：getServerSideProps・キャッシュ・配信の注意点 →