【key-front】2023年度リクルート / エンジニアコース新人研修の講義資料(Next.js)を読んでみた
モチベーション
- 毎週金曜日Slackのkey_frontチャンネルでハドル機能を使いお題に対してメンバー同士ディスカッションをする時間を15〜30分程度設けている
- 今回は「2023年度リクルート エンジニアコース新人研修の講義資料(Next.js)」の共有会
- ファシリテーターは筆者なので、事前に読み込んで気になった点などをスクラップに投げていく
- 開催日は8/18(金)で最終的に議事録として結論をまとめる
資料
メモ1
- 今回リクルートの研修資料を輪読会の対象にしたかというと資料内にある「Next.jsのSPA」という点が勉強になったので共有したかったから
- Next.jsってSSRとかSSGとかじゃないの?SPAってReactじゃないの?という認識だったら資料を見てみると情報のアップデートができると思った
- 半年前くらいに某メガベンチャー(リクルートではない企業様)の面談を受けた時に「......弊社は今Next.jsのSPA化を進めています......(確かこんな感じだったような...とりあえずNext.js・SPAの発言だけは覚えている)」との発言があり当初困惑していたが、恐らくリクルートの研修資料にあることを指しているのだと思われる
適宜補足を入れながら摘んでいく
第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が可能(サーバーサイドのテンプレートが不要になった)
適宜補足を入れながら摘んでいく
第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というレンダリング技術が存在する
適宜補足を入れながら摘んでいく
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
メモ2
- 2022年度版
メモ3
- ハイドレーションの無いSSRは古典的SSR
適宜補足を入れながら摘んでいく
第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ナビゲーションしているところ。以下は具体的な画像ありで説明しているのでわかりやすそう。
議事録_20230827
- 8/17(木)に実施
- 結論を出すコンテンツではなかったため特に結論はなし
- 参加人数は7名(以下エビデンス)
- 2023年度リクルート・エンジニアコース新人研修の講義資料(Next.js)を通してNext.jsのSPAについて理解してもらえた
- Nuxt.jsのmodeプロパティについて議論が上がった
- spa:サーバーサイドレンダリングを行いません(クライアントでの遷移のみ)
- universal:アイソモーフィックなアプリケーション(サーバーサイドレンダリングに加え、クライアントでの遷移を行う)になります
- あとはReact公式がフレームワークを使用することをお勧めしていることなど。どちらにせよNext.jsは理解しておかないと。
新しいアプリや新しいウェブサイトをReactで完全に構築したい場合は、コミュニティで人気のあるReact搭載フレームワークの1つを選ぶことをお勧めする。フレームワークは、ルーティング、データ取得、HTML生成など、ほとんどのアプリやサイトが最終的に必要とする機能を提供する。
本スクラップが腹落ちしない場合は、以下の記事を見た方が良いかもしれません