React/Next.jsにおけるNode.jsの役割を雑に整理したい
React/Next.jsを使用する際、Node.jsは必ず必要と言われる。
特に不思議に思うこともなくそのまま受け入れていたが、改めて考えてみると、Node.jsはReact/Next.jsにおいてどういった役割を果たしているのか気になった。
React/Next.jsにおいて、Node.jsはどういう役割を果たしているのかを色々な人と話し合いたい。
Next.jsでのnext dev。
appDir
機能を用いるには、Node.jsのv16.8以上を求められる。
→ Next.jsを使うにはNode.jsが必要。
【後付タイトル】URLのエンドポイントに対して(Next.jsを動かしているNode.jsサーバー)、GETリクエストを飛ばし、HTMLの返却を要求する
Next.js(App Router)で、雑にsandbox/
ページを作成した。
sandbox/
ページに行くと、document
として、ある程度生成されたHTMLが返ってくる。
まだCSSの反映されていない素のHTMLが返却されている。
ここでポイントとなるのは、sandbox/
とリクエストした時点である程度形のある(今回は"Sandbox Page"という文言しかないので完全な状態で)HTMLが返却される点。
素のReactを用いたSPAでよく見かける、<div id="root"></div>
のような空のHTMLではないのがポイント。Next.jsがSEOにより良いと言われるのはこういった部分かな。
【後付タイトル】SWCによってJSにトランスパイルされる
sandbox/
ページ用に作成したページ用のコンポーネントがこれ。
トランスパイラ(Next.jsでは恐らくSWC?)によって、JSX
→ JavaScript
にトランスパイルされ、/.next/server/app/sandbox/page.js
ファイルに出力されていた。
このJSにトランスパイルされたコード(?)は、上で挙げたsandbox
画面リクエスト時の、レスポンスHTMLの中でscript
タグの中の一つとして読み込まれていた。
最終的なDOMの中にもレスポンスとして返ってきたHTMLと同じようにJSにトランスパイルされたSandbox画面のコンポーネントのコード(スクリプト)が書かれているが、結局これの意味するところはあまり掴みきれていない。
このコードが実行されることによってDOMの生成が起きているのかな。?
Next.jsとNode.jsの関係は少しずつ分かってきた気がする。
{Next.jsのホスト(ex. localhost:3000)}/{指定のページ名}
でリクエストすることによって、そのパス(=エンドポイント)に応じてNode.jsが動き、初回ロード時はHTML、2回目以降の遷移時はJSON(?)で差分(?)がレスポンスとしてサーバーサイド(Node.js)から返却されていることがわかった。
じゃあ次はこれがWebサーバーの代わりを果たしているのかが気になる。
ApacheやNginxなどのWebサーバーと呼ばれるものは、「/endpoint」に対応したリクエストを、PHP(Laravel)などのアプリケーションサーバーに送る役割を持っている認識をしているが、Next.js × Laravel(API)のような構成のとき、Webサーバーというものは存在しているのか。疑問。
まだよく理解できていないところ
- ReactやNext.jsを使用する際に、Node.jsが裏側で活躍していると思われるが、その実行タイミングはいつなのか
- Reactの実行されるタイミング(例えばボタンをクリックしてcountステートを更新したときなど)で、毎回Node.js上で処理が実行されている?
- Webサーバーとどう共存しているのか(というかNext.js自体がNode.jsで作られたWebサーバー?)
- React(Next.js)の仮想DOMによる差分検出処理は、ブラウザの機能に仮想DOMという概念は登場しないため、ブラウザで行なわれているわけではなさそうなことはわかるが、その差分検出の処理はどのタイミングで行なわれているのか
- 再レンダリングの際(この再レンダリングというのもどういうものかより深掘りしたい)、Reactコンポーネントが特定の場所から全て再実行され、レンダーツリー(?)を形成(?)し(これ仮想DOM?)、差分検出をし(このタイミング?)、実DOMへとコミットされるまでの流れ
- Node.jsのその他の役割
- 役割として一番大きそうなのは、サーバーサイドでJavaScriptを実行できることかな
- 詳しくはわからないが、SWCのバンドル処理(依存関係の解決)、ミニファイ処理、トランスパイル処理等もNode.jsで行なわれている?ただSWCはRust製とのことなので、実行環境がNode.js上なことあるのか?
- せっかくNext.jsはOSSなのだから、リクエストからレスポンスまでの流れを実際のコードレベルで追ってみたい
試したいこと
-
/
ページを開く → ボタンonClickしてrouter.pushする →/sandbox
ページに遷移する- このとき、
/
と/sandbox
間の差分はどう解析・検出され、どう仮想DOMから実DOMへ反映されていくのか。 - またこのときNode.jsはどのように関わっているか
- このとき、
-
/
ページを開く →/
ページ内でサーバーサイドフェッチする(AppRouterだとデフォルトRSC(?)) → (なにがしかの処理) → 画面に取得したデータを含めて反映される- このとき、サーバーサイド上でのフェッチ以降、(なにがしかの処理)の部分では主に何が起きているか