Open4

Remix と hydration

Remix
nukopynukopy

Remix の制御フローと各々のファイルの役割

制御フロー

初回アクセス時：

  1. ブラウザからリクエスト
  2. server.ts でリクエストを受信する
  3. entry.server.tsx でサーバーサイドレンダリングを実行
  4. root.tsx のレイアウトを使用
  5. HTMLをクライアントに返す
  6. クライアントで entry.client.tsx がハイドレーション

クライアントサイドナビゲーション時：

  1. entry.client.tsx が新しいルートのデータを取得
  2. クライアントサイドでレンダリング
  3. root.tsx のレイアウトを維持したまま内容を更新

各ファイルのスコープ：

  • root.tsx：全てのページで共有される要素（レイアウト、メタ情報など）
  • entry.server.tsx：サーバーサイドでのレンダリングロジック
  • entry.client.tsx：ブラウザでの初期化とハイドレーション

これらのファイルが連携することで、サーバーサイドレンダリングとクライアントサイドのインタラクティブ性を両立している。

nukopynukopy

ハイドレーションとは？

基本

ハイドレーションはクライアントサイドで行われる重要なプロセスであり、基本的にはサーバーサイドレンダリングとセットで実行される。

「ハイドレーション」という用語は、ウェブ開発におけるサーバーサイドレンダリングされた静的なHTMLに対して、クライアントサイドのJavaScriptを使って動的な機能を付加するプロセスを比喩的に表現したもの。

  1. リクエストを受信
  2. サーバーサイドレンダリング：HTML を生成しレスポンスを返す
    <!-- サーバーから送られてくるHTML -->
<div id="app">
  <button>いいね: 0</button>
</div>
  3. ハイドレーション：JavaScript を読み込み、実行する
    • HTML はすでに存在している
    • React がこの既存の HTML に対してイベントリスナーを付与
    • 状態管理を初期化
    • コンポーネントを「活性化」する（「活性化」はインタラクションがない状態からある状態にすることを指している）

例えば：

// このようなコンポーネントがある場合
function LikeButton() {
  const [count, setCount] = useState(0);
  return (
    <button onClick={() => setCount(count + 1)}>
      いいね: {count}
    </button>
  );
}

ハイドレーション前：

  • ボタンは表示されているが、クリックしても反応しない
  • JavaScriptの機能が未接続

ハイドレーション後：

  • クリックイベントが機能
  • 状態管理が動作
  • インタラクティブな操作が可能

ハイドレーションが重要な理由：

  • 初期表示が早い（HTMLがすぐに表示される）
  • SEOに有利（HTMLが最初から存在）
  • インタラクティブ性も確保（ハイドレーション後）

ハイドレーションは「静的なHTML」を「動的なReactアプリケーション」に変換する工程だと考えることができる。

nukopynukopy

Remix における SSR、CSR

  • Remixは、SSRが作成したHTMLドキュメントをブラウザに提供した後、ブラウザビルドの JavaScript モジュールでページを「ハイドレート（再活性化）」します。これは、Remixが「ブラウザをエミュレートする」とよく言われる部分です。ハイドレーションという用語は、ウェブ開発におけるサーバーサイドレンダリングされた静的なHTMLに対して、クライアントサイドのJavaScriptを使って動的な機能を付加するプロセスを比喩的に表現したものです。この過程により、ページは迅速に表示され、インタラクティブな要素もスムーズに動作するようになります。
  • ユーザーがリンクをクリックすると、ドキュメント全体とすべてのアセットをサーバーから取得するのではなく、次のページのデータだけをフェッチして UI を更新します。
  • ユーザーが <Form> を使ってデータを更新する際、通常の HTML ドキュメントリクエストを行う代わりに、ブラウザランタイムがサーバーにフェッチを行い、ページ上のすべてのデータを自動的に再検証し、Reactで更新します。
  • ref: (2024.08.07) Remixの特徴

https://www.s3lab.co.jp/blog/remix/1946/