【key-front】2023年度リクルート / エンジニアコース新人研修の講義資料（Next.js）を読んでみた
1zushunモチベーション
- 毎週金曜日Slackのkey_frontチャンネルでハドル機能を使いお題に対してメンバー同士ディスカッションをする時間を15〜30分程度設けている
- 今回は「2023年度リクルート エンジニアコース新人研修の講義資料（Next.js）」の共有会
- ファシリテーターは筆者なので、事前に読み込んで気になった点などをスクラップに投げていく
- 開催日は8/18（金）で最終的に議事録として結論をまとめる
1zushun資料
メモ1
- 今回リクルートの研修資料を輪読会の対象にしたかというと資料内にある「Next.jsのSPA」という点が勉強になったので共有したかったから
- Next.jsってSSRとかSSGとかじゃないの？SPAってReactじゃないの？という認識だったら資料を見てみると情報のアップデートができると思った
- 半年前くらいに某メガベンチャー（リクルートではない企業様）の面談を受けた時に「......弊社は今Next.jsのSPA化を進めています......（確かこんな感じだったような...とりあえずNext.js・SPAの発言だけは覚えている）」との発言があり当初困惑していたが、恐らくリクルートの研修資料にあることを指しているのだと思われる
1zushun適宜補足を入れながら摘んでいく
第1章 フロントエンド開発SPAフレームワーク
SPAとMPAの違いは画面遷移である
- SPAは画面遷移をしても、ブラウザの状態が破棄されない（MPAはリクエストごとにHTMLを作成、SPAはDOMを適宜書き換えることで画面遷移）
- 非同期で必要なコンテンツのみをダウンロードする
※第2章で詳細に触れる
単一（複数）のHTMLでSPA展開するもの
- 単一のHTMLでSPA展開するもの = 典型的なSPA（古典的なSPA）
- 複数のHTMLでSPA展開するもの（Next.js, Remix, SvelteKit, Nuxt.js...）
「単一（複数）のHTMLでSPA展開するもの」としてReact, Next.jsを表現している
※第2章で詳細に触れる
SPAが解決したMPAの課題
React研修資料へ少し脱線するがサーバーサイドのテンプレートが不要になったに関して補足
最近取り組んでいるLaravel（Inertia.js）× Reactではサーバーサイドのテンプレートが不要になったことを知ったので共有
- APIでやる場合：Laravel⇄Vue.js（サーバーサイドのテンプレートが不要になった）
- モノレポでやる場合：Laravel⇄Blade（サーバーサイドのテンプレートが必要）
- モノレポでやる場合（JSフレームワークを使う）：Laravel⇄Blade⇄Vue.js（サーバーサイドのテンプレートが必要）
- モノレポでやる場合：Laravel（Inertia.js）⇄Vue.jsが可能（サーバーサイドのテンプレートが不要になった）
1zushun適宜補足を入れながら摘んでいく
第2章 Next.jsのSPA
Next.jsはSPA構築を容易にし、快適な開発体験を提供します。
「Next.jsはSPA構築を容易にする」のがポイント
SPA（CSRのみ）とSPA（CSR + 事前レンダリング）
- 初期表示の後はSPA（CSRのみ）と同様にCSRで画面を更新
- 事前レンダリングはSPAの初期表示のための最適化
ここが味噌になる。
そもそもSPAの弱点克服のためのSSR, SSG（事前レンダリング）であることが頭から抜けていた。SPA（CSRのみ）のデメリットである初期表示の遅延が解消される。
初期表示以降はSPA（CSRのみ）になるのが「Next.jsのSPA」である根拠だと思う。アクセス（初回表示orリロード）するたびSSRするはあっていて遷移するたびにSSRするは間違い。
補足 CodeGrid
SSR（Server-side Rendering）では、SPAにおける初期状態が初めから適用されたHTMLをサーバー側で構築して返却します。ブラウザはそのHTMLを表示しつつも、それらをサーバーから同時に返されている初期状態をセットしたReactコンポーネントに置換することで、以降はSPAとして動作します。
このときのSSRという言葉にはSPAを経た文脈を持ち合わせています。
CodeGridから引用した「SPAを経た文脈を持ち合わせています」がしっくりきた。
ここまで踏まえた上で「Next.jsはSPAフレームワークです」と言われないのかなと思った。Versel公式では「The React Framework for the Web」と書かれているから（React = SPA）間違いではないと思うのだが。ちなみに研修資料（Next.js）では「Next.jsはSPA構築を容易にする」と説明されている。
なぜSSRをしたいのか？
- SPAの初期表示速度の改善
- 検索エンジンから読めるHTMLを返せることによる検索エンジンの最適化
- OGP対応
ここは研修資料と同じ
→別途Next.jsのドキュメント読んでみる
一旦、React研修資料にも明記されているようにSPAが根底にあってSSR, SSGはSPAの一部（初回表示後はSPAになるため）であるという認識で良さそう→咀嚼の仕方はあってそう（以下参照）
引用を繰り返すかたちになりますが、つまりSSRは、それ単体で使用されるというより、SPAと組み合わせて使用されるアーキテクチャであるようです。
SPA（シングルページアプリケーション）という大きな括りの中でCSR/SSR/SSGというレンダリング技術が存在する
1zushun適宜補足を入れながら摘んでいく
LinkコンポーネントやRouterを使用すると、SPAナビゲーションができる
ここでいうところのSPAナビゲーションはClient Side Navigationを指していると思う
第1章で触れた内容と同じ
- SPAは画面遷移をしても、ブラウザの状態が破棄されない（MPAはリクエストごとにHTMLを作成、SPAはDOMを適宜書き換えることで画面遷移）
- 非同期で必要なコンテンツのみをダウンロードする
さらに補足する
-
公式ドキュメント
https://nextjs.org/learn/basics/navigate-between-pages/client-side -
日本語で上記公式ドキュメントを説明している記事
https://qiita.com/YSasago/items/c4df637e57b07b08df5b
1zushunメモ2
- 2022年度版
メモ3
- ハイドレーションの無いSSRは古典的SSR
1zushun適宜補足を入れながら摘んでいく
第4章 Next.jsとパフォーマンス
事前レンダリング
- SSG/SSRするとSPAにならない？→ NO
上記に関しては散々スクラップに投げてきたので割愛
補足:20231102
- 直接アクセス・SPAナビゲーションに備え「両方」用意される
「両方」とはHTML・JSONのこと。
ここが結構味噌だった。この「両方」用意されているからSSR/SSG以降はSPAになる。
- SSRページはリクエストに応じてHTML・JSONを都度出し分ける
つまりgsspはHTMLをSSRするだけの関数ではないことがわかる。
次の記事の「NodeJSプロセスでの実行」に丁寧に書かれている。
投機的な事前レンダリング
リスク的な意味合い。どんなリスクがあるかは研修資料にもあるが後で深ぼってみる。
メモ4
Link押下で、プリフェッチしたJSONでページ書き換え
これがSPAナビゲーションしているところ。以下は具体的な画像ありで説明しているのでわかりやすそう。
1zushun議事録_20230827
- 8/17（木）に実施
- 結論を出すコンテンツではなかったため特に結論はなし
- 参加人数は7名（以下エビデンス）
- 2023年度リクルート・エンジニアコース新人研修の講義資料（Next.js）を通してNext.jsのSPAについて理解してもらえた
- Nuxt.jsのmodeプロパティについて議論が上がった
- spa：サーバーサイドレンダリングを行いません（クライアントでの遷移のみ）
- universal：アイソモーフィックなアプリケーション（サーバーサイドレンダリングに加え、クライアントでの遷移を行う）になります
- あとはReact公式がフレームワークを使用することをお勧めしていることなど。どちらにせよNext.jsは理解しておかないと。
新しいアプリや新しいウェブサイトをReactで完全に構築したい場合は、コミュニティで人気のあるReact搭載フレームワークの1つを選ぶことをお勧めする。フレームワークは、ルーティング、データ取得、HTML生成など、ほとんどのアプリやサイトが最終的に必要とする機能を提供する。