コンポーネントハイドレーションのサンプル
@remix-run/component の clientEntry を使った SSR + hydrate。同じコンポーネント定義 (web/client/islands/counter.tsx) を、サーバーでは直接 JSX ツリーに埋め込んで renderToStream で HTML 化し、クライアントでは run() が hydration マーカーから動的 import で chunk を読み込み、in-place にハイドレートします。
Counter (clientEntry)
初期カウントはサーバー (静的ビルドではビルド時) が決定。ボタンはクライアントのハイドレート後に動きます。
Left
Right
JavaScript 無効でもカウンターの初期値は表示されます (progressive enhancement)。
3 つとも別々のブラウザ entrypointで、互いに直接は通信しません。 Counter は同じ click store を import し、Total はそれを購読しているだけです。bundler がその store を共有 chunk に 1 つだけ出力するので、合計が追従します。entry ごとに別々にコンパイルすると store が複製され、合計はずっと 0 のままになります。
rendered at 2026-10-16T14:54:34.571Z