WEBVTT

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

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

3
00:00:04.779 --> 00:00:09.789
ページズルーターで、ゲットスタティックプロップスとゲットスタティックパス、

4
00:00:09.789 --> 00:00:14.799
動的ルートと静的出力を、タイプスクリプトの例で学びます。

5
00:00:14.799 --> 00:00:22.506
エスエスジーは、アクセスが来る前に、必要なデータを集めてエイチティーエムエルを生成しておく方法です。

6
00:00:22.506 --> 00:00:27.901
公開記事のように、多くの利用者へ同じ内容を届けるページに向いています。

7
00:00:27.901 --> 00:00:32.834
この記事はタイプスクリプトとページズルーターを前提にしています。

8
00:00:32.834 --> 00:00:37.767
アプリルーターのジェネレートスタティックパラムスとは書き方が異なるため、

9
00:00:37.767 --> 00:00:42.700
その点に注意しながら、全体の流れを順に確認していきます。

10
00:00:42.700 --> 00:00:45.266
まずエスエスジーの位置付けです。

11
00:00:45.266 --> 00:00:51.280
通常のサーバー生成では、リクエストのたびにページを作りますが、エスエスジーではビルドの時点でデータを取得し、

12
00:00:51.280 --> 00:00:57.295
エイチティーエムエルを完成させておきます。

13
00:00:57.295 --> 00:01:01.705
利用者がアクセスしたときは、出来上がったファイルを返すだけなので、表示が速く、

14
00:01:01.705 --> 00:01:06.116
サーバーへの負荷も抑えられます。

15
00:01:06.116 --> 00:01:09.644
一方で、内容は生成した時点のものになります。

16
00:01:09.644 --> 00:01:12.531
更新を反映するには再生成が必要です。

17
00:01:12.531 --> 00:01:19.267
頻繁に変わらない記事や製品紹介など、みんなに同じ内容を見せるページで力を発揮します。

18
00:01:19.267 --> 00:01:23.678
逆に、利用者ごとに違う内容や、常に最新でなければならない情報には向きにくい、

19
00:01:23.678 --> 00:01:28.088
という判断軸を持っておきましょう。

20
00:01:28.088 --> 00:01:31.061
最初の例は、生成日時を表示するページです。

21
00:01:31.061 --> 00:01:34.600
ファイルはビルドインフォ・ティーエスエックスです。

22
00:01:34.600 --> 00:01:41.537
ゲットスタティックプロップスは非同期関数で、戻り値のプロップスに、生成日時を文字列で入れています。

23
00:01:41.537 --> 00:01:46.351
ページコンポーネントは、そのプロップスを受け取って日時を表示します。

24
00:01:46.351 --> 00:01:52.438
ポイントは、日時オブジェクトをそのまま渡さず、アイエスオー文字列へ変換している点です。

25
00:01:52.438 --> 00:01:56.756
プロップスはジェイソンとして扱える値でなければならず、関数や日時オブジェクトのような、

26
00:01:56.756 --> 00:02:01.074
そのまま保存できない値は渡せません。

27
00:02:01.074 --> 00:02:08.436
この例では、ビルドを実行した時刻がそのままページに焼き込まれるため、生成のタイミングを目で確認できます。

28
00:02:08.436 --> 00:02:10.572
プロップスに渡す値の注意点です。

29
00:02:10.572 --> 00:02:17.513
ページへ渡したデータは、生成されたエイチティーエムエルや付随するデータとしてブラウザーから確認できます。

30
00:02:17.513 --> 00:02:22.585
そのため、秘密のエーピーアイキーや個人情報をプロップスに含めてはいけません。

31
00:02:22.585 --> 00:02:29.126
サーバー側で取得したデータをそのまま全部渡すのではなく、画面に必要な項目だけに絞ることが大切です。

32
00:02:29.126 --> 00:02:33.264
また、データ取得が不要なページは、ゲットスタティックプロップスを書かなくても、

33
00:02:33.264 --> 00:02:37.402
自動的に静的最適化の対象になることがあります。

34
00:02:37.402 --> 00:02:41.473
この関数は、ビルド時のデータ取得を明示する必要があるときに使うものだと理解しておくと、

35
00:02:41.473 --> 00:02:45.544
書くべき場所が判断しやすくなります。

36
00:02:45.544 --> 00:02:47.543
次は記事ごとのページです。

37
00:02:47.543 --> 00:02:54.771
ファイル名はポスツ配下のブラケットスラッグで、スラッグの部分が記事ごとに変わる動的ルートです。

38
00:02:54.771 --> 00:03:01.229
例では外部のエーピーアイを使わず、同じファイル内に二件の記事データを定義しています。

39
00:03:01.229 --> 00:03:05.842
ゲットスタティックパスは、生成するユーアールエルを列挙する役割で、ポスツ配列からスラッグを取り出し、

40
00:03:05.842 --> 00:03:10.456
パスとして返します。

41
00:03:10.456 --> 00:03:16.453
フォールバックはフォルスで、列挙していないユーアールエルには四百四を返します。

42
00:03:16.453 --> 00:03:21.528
つまり、どのページを作るかを決めるのがゲットスタティックパスです。

43
00:03:21.528 --> 00:03:26.756
記事が増えたら、この列挙に含めることが、ページ生成の前提になります。

44
00:03:26.756 --> 00:03:32.022
続いて、各ユーアールエルの中身を決めるのがゲットスタティックプロップスです。

45
00:03:32.022 --> 00:03:37.566
引数のパラムスからスラッグを受け取り、ポスツ配列の中から一致する記事を探します。

46
00:03:37.566 --> 00:03:44.772
見つからなければノットファウンド・トゥルーを返し、見つかればその記事をプロップスとしてページへ渡します。

47
00:03:44.772 --> 00:03:48.791
ページコンポーネントは、タイトルと本文を表示するだけです。

48
00:03:48.791 --> 00:03:55.581
このように、パスが生成対象を決め、プロップスが内容を決める、という役割分担が動的ルートの要点です。

49
00:03:55.581 --> 00:04:00.062
実際のシーエムエスとつなぐ場合も、ビルド中に一覧と本文を取得する流れは同じで、

50
00:04:00.062 --> 00:04:04.543
同じアプリのエーピーアイルーツへエイチティーティーピーでアクセスする必要はなく、

51
00:04:04.543 --> 00:04:09.024
サーバー用の取得処理を直接呼べます。

52
00:04:09.024 --> 00:04:15.938
作ったページを静的なファイルとして取り出すには、ネクストコンフィグにアウトプット・エクスポートを設定します。

53
00:04:15.938 --> 00:04:23.492
トレーリングスラッシュをトゥルーにすると、各ページがフォルダーとインデックス・エイチティーエムエルの形で出力されます。

54
00:04:23.492 --> 00:04:31.687
設定後にエヌピーエム・ラン・ビルドを実行すると、アウトフォルダーに、ビルドインフォや各記事のエイチティーエムエルが生成されます。

55
00:04:31.687 --> 00:04:37.192
配信先へはエイチティーエムエルだけでなく、アウト配下の内容をまとめて配置してください。

56
00:04:37.192 --> 00:04:39.881
シースエスやジャバスクリプトも含まれます。

57
00:04:39.881 --> 00:04:43.210
なお、現在の静的出力はこの設定とビルドで完結します。

58
00:04:43.210 --> 00:04:50.380
古い手順にある独立したネクストエクスポート・コマンドを、そのまま新しいバージョンへ適用しないよう注意しましょう。

59
00:04:50.380 --> 00:04:52.213
開発中の見え方に注意します。

60
00:04:52.213 --> 00:04:58.106
エヌピーエム・ラン・デブでは、ゲットスタティックプロップスがリクエスト時にも実行されます。

61
00:04:58.106 --> 00:05:04.392
そのため、ページを更新するたびに生成日時が変わっても、静的生成が失敗しているわけではありません。

62
00:05:04.392 --> 00:05:08.451
本番の挙動は、ビルド後のファイルで確認するのが正しい手順です。

63
00:05:08.451 --> 00:05:10.416
次にアイエスアールの違いです。

64
00:05:10.416 --> 00:05:14.279
ノードジェイエスのサーバーなどを使う配信では、リバリデートを指定したアイエスアールで、

65
00:05:14.279 --> 00:05:18.142
公開後にページを再生成できます。

66
00:05:18.142 --> 00:05:22.005
一方、静的出力で配置したファイルは、サーバーがネクストジェイエスのコードを実行しないため、

67
00:05:22.005 --> 00:05:25.868
アイエスアールは使えません。

68
00:05:25.868 --> 00:05:28.880
本文を更新したら、再ビルドと再配置が必要です。

69
00:05:28.880 --> 00:05:31.341
静的出力の運用で確認することです。

70
00:05:31.341 --> 00:05:36.697
まず、ゲットサーバーサイドプロップスや、ページズルーターのエーピーアイルーツは、

71
00:05:36.697 --> 00:05:42.054
リクエスト時のサーバー処理を前提にするため、静的出力では使いません。

72
00:05:42.054 --> 00:05:46.252
フォールバックのトゥルーやブロッキングも同様に使えません。

73
00:05:46.252 --> 00:05:47.265
次に画像です。

74
00:05:47.265 --> 00:05:56.675
ネクストイメージのデフォルトの最適化にはサーバーが必要なので、静的出力ではカスタムローダーやアンオプティマイズドなどを検討します。

75
00:05:56.675 --> 00:06:04.782
さらに、シーエムエスの取得に失敗したときに、空の記事を公開するのか、ビルド自体を失敗させるのかを決めておきます。

76
00:06:04.782 --> 00:06:09.269
公開本文であれば、失敗に気付ける設計の方が扱いやすいでしょう。

77
00:06:09.269 --> 00:06:15.060
記事数が増える場合は、取得件数の上限やページ分割、呼び出し制限の確認も必要です。

78
00:06:15.060 --> 00:06:17.468
公開範囲の線引きも大切です。

79
00:06:17.468 --> 00:06:25.382
認証が必要な利用者別のデータを、誰でも見られる公開エイチティーエムエルへ混ぜてはいけません。

80
00:06:25.382 --> 00:06:31.059
静的に生成する部分と、ログイン後に取得する部分を分けて設計します。

81
00:06:31.059 --> 00:06:39.833
一方で、エスエスジーのページでも、表示した後にブラウザーで検索やフォーム操作を実装することはできます。

82
00:06:39.833 --> 00:06:45.510
ただし、初期のエイチティーエムエルに必要な本文までブラウザーの取得待ちにしてしまうと、

83
00:06:45.510 --> 00:06:51.187
事前に生成しておく利点を活かしにくくなります。

84
00:06:51.187 --> 00:06:58.240
本文は事前生成で届け、操作や個別の情報だけを後から扱う、というバランスが基本です。

85
00:06:58.240 --> 00:07:03.147
最後に、シーエムエスの記事更新が表示されないときの確認です。

86
00:07:03.147 --> 00:07:10.179
静的出力では、シーエムエスを更新しただけで公開ファイルが書き換わるわけではありません。

87
00:07:10.179 --> 00:07:16.721
最新データを取得して再ビルドし、その出力が公開先へ反映されているかを確認します。

88
00:07:16.721 --> 00:07:21.955
それでも詳細ページへアクセスできない場合は、生成漏れを調べます。

89
00:07:21.955 --> 00:07:26.289
記事一覧に存在していても、ゲットスタティックパスで返すアイディーが漏れていれば、

90
00:07:26.289 --> 00:07:30.623
そのパスは生成されません。

91
00:07:30.623 --> 00:07:35.039
実際のユーアールエルと公開ファイルを照合してください。

92
00:07:35.039 --> 00:07:36.020
まとめです。

93
00:07:36.020 --> 00:07:42.889
ゲットスタティックパスが生成対象を決め、ゲットスタティックプロップスが内容を決める。

94
00:07:42.889 --> 00:07:45.016
更新は再ビルドで反映する。

95
00:07:45.016 --> 00:07:49.268
この流れを押さえれば、エスエスジーの基本は完成です。