Open7

React/Next.jsにおけるNode.jsの役割を雑に整理したい

ピン留めされたアイテム
koukou

React/Next.jsを使用する際、Node.jsは必ず必要と言われる。
特に不思議に思うこともなくそのまま受け入れていたが、改めて考えてみると、Node.jsはReact/Next.jsにおいてどういった役割を果たしているのか気になった。

React/Next.jsにおいて、Node.jsはどういう役割を果たしているのかを色々な人と話し合いたい。

koukou

Next.jsでのnext dev。
appDir機能を用いるには、Node.jsのv16.8以上を求められる。

→ Next.jsを使うにはNode.jsが必要。

koukou

【後付タイトル】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により良いと言われるのはこういった部分かな。

koukou

【後付タイトル】SWCによってJSにトランスパイルされる

sandbox/ページ用に作成したページ用のコンポーネントがこれ。

トランスパイラ(Next.jsでは恐らくSWC?)によって、JSXJavaScriptにトランスパイルされ、/.next/server/app/sandbox/page.jsファイルに出力されていた。


このJSにトランスパイルされたコード(?)は、上で挙げたsandbox画面リクエスト時の、レスポンスHTMLの中でscriptタグの中の一つとして読み込まれていた。

最終的なDOMの中にもレスポンスとして返ってきたHTMLと同じようにJSにトランスパイルされたSandbox画面のコンポーネントのコード(スクリプト)が書かれているが、結局これの意味するところはあまり掴みきれていない。

このコードが実行されることによってDOMの生成が起きているのかな。?

koukou

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サーバーというものは存在しているのか。疑問。

koukou

まだよく理解できていないところ

  • 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なのだから、リクエストからレスポンスまでの流れを実際のコードレベルで追ってみたい
koukou

試したいこと

  • /ページを開く → ボタンonClickしてrouter.pushする → /sandboxページに遷移する
    • このとき、//sandbox間の差分はどう解析・検出され、どう仮想DOMから実DOMへ反映されていくのか。
    • またこのときNode.jsはどのように関わっているか
  • /ページを開く → /ページ内でサーバーサイドフェッチする(AppRouterだとデフォルトRSC(?)) → (なにがしかの処理) → 画面に取得したデータを含めて反映される
    • このとき、サーバーサイド上でのフェッチ以降、(なにがしかの処理)の部分では主に何が起きているか