レンダリング方式について入れたい

[74rina]

レンダリング方式

1. CSR（Client Side Rendering）

   • リクエストを受けたサーバが、最小限のHTMLとJSを返し、ブラウザでUIを構築する。
   • ブラウザ側ではJSが実行され、DOMが組み立てられ、レンダリングされる。
   • 初回表示は遅い（∵ JS実行待ち）が、その後は速い（∵ 画面遷移はJSで完結）。
   • ReactやVueなど。

2. SSR（Server Side Rendering）

   • リクエストを受けたサーバがHTMLを作成し、クライアントに返却する。
   • 初回表示は速いが、その後は遅い。

現在はこれらを組み合わせ、①初回表示を高速化、②以降のインタラクティブ性（操作性）の向上を両立している。

1. SSRでHTMLを表示（速い）
2. ブラウザがJSを読み込む
3. そこでJSがDOMと結びつく（Hydration）
4. 以降はCSR的に動く

::: tip
Hydration

サーバでSSRで生成されたHTMLに対して、ブラウザ側のJavaScriptがイベント処理などを結びつけるプロセス。

:::