WEBVTT

1
00:00:00.000 --> 00:00:00.953
こんにちは。

2
00:00:00.953 --> 00:00:05.083
今回は、ネクストジェイエスのエスエスアール入門です。

3
00:00:05.083 --> 00:00:10.166
ページズルーターのゲットサーバーサイドプロップスを使い、リクエストごとにページを生成する方法を、

4
00:00:10.166 --> 00:00:15.249
タイプスクリプトの例で学びます。

5
00:00:15.249 --> 00:00:22.556
エスエスアールは、アクセスが来たタイミングでサーバーがエイチティーエムエルを作る仕組みです。

6
00:00:22.556 --> 00:00:27.162
その時点の最新情報や、利用者に応じた内容を画面へ渡せます。

7
00:00:27.162 --> 00:00:33.039
一方で、キャッシュの共有範囲や、プロップスに含める情報には注意が必要です。

8
00:00:33.039 --> 00:00:37.804
前提と基本の流れから、配信の注意点まで順に確認していきます。

9
00:00:37.804 --> 00:00:41.140
まずは全体像をつかみ、細部へ進みましょう。

10
00:00:41.140 --> 00:00:42.233
まず前提です。

11
00:00:42.233 --> 00:00:51.448
この記事はタイプスクリプトとページズルーターを使い、ネクストジェイエスを実行するサーバーがある構成を前提にしています。

12
00:00:51.448 --> 00:01:00.350
アウトプット・エクスポートで作る静的サイトには、リクエスト時に動くゲットサーバーサイドプロップスを含められません。

13
00:01:00.350 --> 00:01:09.877
また、アプリルーターでは別のデータ取得方法を使うため、このコードをエスアールシー・アプリ配下へそのまま移さないでください。

14
00:01:09.877 --> 00:01:16.906
エスエスジーが事前に作って配信するのに対し、エスエスアールはリクエストのたびに生成します。

15
00:01:16.906 --> 00:01:21.747
どちらの配信方法がページに合うかを先に決めることが出発点です。

16
00:01:21.747 --> 00:01:25.808
この前提の違いが、使える機能の判断にもつながります。

17
00:01:25.808 --> 00:01:29.936
最初の例は、サーバーで生成した時刻を表示するページです。

18
00:01:29.936 --> 00:01:33.621
ファイルはサーバータイム・ティーエスエックスです。

19
00:01:33.621 --> 00:01:39.002
ゲットサーバーサイドプロップスは非同期関数で、レスポンスへキャッシュコントロールを設定し、

20
00:01:39.002 --> 00:01:44.383
現在時刻をアイエスオー文字列にしてプロップスで返します。

21
00:01:44.383 --> 00:01:48.658
ページコンポーネントは、その文字列を受け取って表示します。

22
00:01:48.658 --> 00:01:53.965
サーバータイムへアクセスし、再取得すると値が変わるのが確認ポイントです。

23
00:01:53.965 --> 00:02:00.156
表示されるのはブラウザーが独自に動かす時計ではなく、レスポンスを作った時点の値です。

24
00:02:00.156 --> 00:02:05.316
リクエストのたびにサーバーで値が作られる、という流れを押さえましょう。

25
00:02:05.316 --> 00:02:07.181
プロップスの注意点です。

26
00:02:07.181 --> 00:02:15.416
ゲットサーバーサイドプロップス自体はサーバー側で実行されますが、返したプロップスはブラウザーへ送られます。

27
00:02:15.416 --> 00:02:22.718
そのため、エーピーアイキーやセッショントークンなど、見せてはいけない情報を含めてはいけません。

28
00:02:22.718 --> 00:02:26.292
サーバーで読めたから安全、とは限らないのです。

29
00:02:26.292 --> 00:02:30.798
また、プロップスはジェイソンとして扱えるデータで返します。

30
00:02:30.798 --> 00:02:35.925
日時はアイエスオー文字列へ変換する、という例の工夫はそのためです。

31
00:02:35.925 --> 00:02:40.431
画面に必要な項目だけに絞り、公開してよいデータだけを返す。

32
00:02:40.431 --> 00:02:44.471
この線引きが、エスエスアールを安全に使う第一歩です。

33
00:02:44.471 --> 00:02:49.288
公開範囲を意識してデータを選ぶ習慣は、他の場面でも役立ちます。

34
00:02:49.288 --> 00:02:52.498
次はユーアールエルの値を使う検索の例です。

35
00:02:52.498 --> 00:02:57.085
サーチ・ティーエスエックスで、スラッシュ・サーチにキューイコール・タイプスクリプト、

36
00:02:57.085 --> 00:03:01.671
のようなユーアールエルを処理します。

37
00:03:01.671 --> 00:03:05.799
ポイントは、クエリの値を文字列と決め付けないことです。

38
00:03:05.799 --> 00:03:11.303
同名のクエリが複数あると配列になる場合もあるため、タイプオブで文字列かどうかを確認し、

39
00:03:11.303 --> 00:03:16.807
文字列なら前後の空白を取り除いて百文字までに切り取ります。

40
00:03:16.807 --> 00:03:19.711
文字列でなければ空文字として扱います。

41
00:03:19.711 --> 00:03:26.438
その検索語で記事タイトルを大文字小文字を区別せずに絞り込み、結果をプロップスで渡します。

42
00:03:26.438 --> 00:03:30.260
入力は必ず検証してから使う、という姿勢が大切です。

43
00:03:30.260 --> 00:03:35.733
ページ側は、検索フォームと、見つかった件数と記事の一覧を表示します。

44
00:03:35.733 --> 00:03:42.011
入力欄には検証済みの検索語が初期値として入り、上限も百文字にそろえてあります。

45
00:03:42.011 --> 00:03:52.636
なお、この例はユーアールエル入力の扱いを学ぶためのもので、小さな固定データの検索自体にエスエスアールが必須という意味ではありません。

46
00:03:52.636 --> 00:03:58.431
データベースを使う場合は、検索部分をサーバー用の取得処理へ置き換えます。

47
00:03:58.431 --> 00:04:06.319
その際、エスキューエルへ文字列を直接連結せず、ライブラリーのパラメーター化されたクエリを使います。

48
00:04:06.319 --> 00:04:13.080
認証が必要なページでは、データ取得の前にセッションとアクセス権限を確認してください。

49
00:04:13.080 --> 00:04:15.254
動作確認は本番モードで行います。

50
00:04:15.254 --> 00:04:20.147
ネクストコンフィグにアウトプット・エクスポートがないサーバー構成で、エヌピーエム・ラン・ビルド、

51
00:04:20.147 --> 00:04:25.039
続いてエヌピーエム・ラン・スタートを実行します。

52
00:04:25.039 --> 00:04:29.931
すでに開発サーバーが同じポートを使っている場合は、先に停止してください。

53
00:04:29.931 --> 00:04:38.221
配信先は、ノードジェイエスを実行するウェブサーバーや、ネクストジェイエスのエスエスアールに対応したホスティングを選びます。

54
00:04:38.221 --> 00:04:45.287
生成された一部のエイチティーエムエルだけを静的サーバーへ転送しても、リクエスト時の処理は再現できません。

55
00:04:45.287 --> 00:04:49.228
配信の仕組みごと用意することが、エスエスアールの前提です。

56
00:04:49.228 --> 00:04:50.764
データ取得の工夫です。

57
00:04:50.764 --> 00:04:59.281
ゲットサーバーサイドプロップスから、同じアプリのエーピーアイルートへエイチティーティーピーでアクセスする必要はありません。

58
00:04:59.281 --> 00:05:04.028
共通の取得関数をサーバー側から直接呼べば、余分な通信を避けられます。

59
00:05:04.028 --> 00:05:10.031
外部エーピーアイを呼ぶ場合は、応答ステータス、タイムアウト、入力値の検証を考慮します。

60
00:05:10.031 --> 00:05:16.873
また、エスエスアールの応答時間には、外部エーピーアイやデータベースの待ち時間がそのまま加わります。

61
00:05:16.873 --> 00:05:22.318
頻繁に変わらない公開記事であれば、エスエスジーの方が構成に合う場合もあります。

62
00:05:22.318 --> 00:05:28.880
エスエスアールにしただけで検索順位や表示速度が必ず改善するわけではない点も覚えておきましょう。

63
00:05:28.880 --> 00:05:30.652
キャッシュの注意点です。

64
00:05:30.652 --> 00:05:35.304
公開情報は条件に応じてキャッシュできますが、利用者別の情報を共有キャッシュへ保存すると、

65
00:05:35.304 --> 00:05:39.957
別の利用者へ情報が渡る危険があります。

66
00:05:39.957 --> 00:05:43.649
ログイン状態に応じたページは、特に慎重に扱います。

67
00:05:43.649 --> 00:05:49.999
この記事の例がプライベート、ノーストアにしているのは、挙動を分かりやすくするためです。

68
00:05:49.999 --> 00:06:00.042
エスエスアールであることだけを根拠に安全だと判断せず、応答ヘッダーと、シーディーエヌなど実際の配信環境の設定を合わせて確認してください。

69
00:06:00.042 --> 00:06:05.949
キャッシュするかどうかではなく、誰と共有してよいか、という範囲の確認が要点です。

70
00:06:05.949 --> 00:06:10.380
共有か個別か、という観点でヘッダーを読み解くことが大切です。

71
00:06:10.380 --> 00:06:13.181
レンダリング時に使えないものにも注意します。

72
00:06:13.181 --> 00:06:17.637
ウィンドウ、ドキュメント、ローカルストレージはサーバーに存在しません。

73
00:06:17.637 --> 00:06:22.348
これらを必要とする処理は、ブラウザーのイベントやエフェクトなどへ分けます。

74
00:06:22.348 --> 00:06:27.059
ページコンポーネントそのものもサーバーで描画される点を忘れないでください。

75
00:06:27.059 --> 00:06:30.878
サーバー側の関数の中で直接触ると、実行時にエラーになります。

76
00:06:30.878 --> 00:06:41.700
もう一つ、エスエスジーとエスエスアールを同じページで併用するために、ゲットスタティックプロップスとゲットサーバーサイドプロップスを同時にエクスポートすることはできません。

77
00:06:41.700 --> 00:06:45.520
ページに必要なデータと配信方法から、どちらか一方を選びます。

78
00:06:45.520 --> 00:06:46.679
最後にまとめです。

79
00:06:46.679 --> 00:06:50.543
エスエスアールでは、ページからゲットサーバーサイドプロップスをエクスポートし、

80
00:06:50.543 --> 00:06:54.407
リクエスト時に取得した値を画面へ渡します。

81
00:06:54.407 --> 00:07:00.718
ユーアールエルなどの入力は型を確認して検証し、認証が必要な場合はデータ取得の前に権限を確認します。

82
00:07:00.718 --> 00:07:06.127
プロップスへ渡した情報はブラウザーへ送られるため、公開してよいデータだけに絞ります。

83
00:07:06.127 --> 00:07:12.438
そして、利用者別の情報を共有キャッシュへ保存しないよう、応答ヘッダーと配信基盤の設定を確認します。

84
00:07:12.438 --> 00:07:18.620
サーバーで生成する利点と、配信の注意点をセットで押さえることが、エスエスアール入門のゴールです。