fresh の island

fresh には特徴的な islands という機能がある。 これはどういう機能なのかというと、サーバーサイドレンダリングを行わずにクライアント側でコンポーネントを展開したいときに使う。たとえば、下記のようなもの。

• ユーザー操作で状態が変わるUI 例: タブ、モーダル、アコーディオン、フォーム補助、Todo操作
• ブラウザAPIが必要 例: localStorage, IntersectionObserver, navigator, 画像プレビュー
• リアルタイム更新 例: ポーリング、WebSocket、ライブメータ
• 重いUIを遅延して読み込みたい 例: エディタ、グラフ、複雑な管理画面部品

これを使うとどうなるか。 使わない場合を考えると、コンポーネント化されてない(再利用性が低い)JSが送られる。一方、使うと、コンポーネント化された(再利用性が高い)JSが送られる。つまり、データ転送量が減る。 ここで、少し疑問が生まれるかもしれない。「コンポーネントを展開するための共通ランタイム」が送られるのでは？という疑問だ。 fresh はこの共通ランタイムが Next.js より極端に小さいという特徴があるため、既存のフレームワークよりメリットがある。

islands のイメージは下記の通り