Island Architecture

概要

Islands Architectureによると、概ね以下のようなアイデアを指すようです

1. SSRなどによってサーバーでレンダリングされたHTMLの中にクライアント側(ブラウザー)において動的または対話的な振る舞いが必要な箇所(dynamic region※)に対してplaceholder(またはslot)を配置しておく

※ 概ね、このdynamic regionのことを"Island"と呼んでいるフレームワークが多そうです

2. クライアント(ブラウザー)では、サーバーでレンダリングされたHTMLに含まれる各placeholderを独立してhydrationする

メリット

hydrationのタイミングを各dynamic region(Island)ごとに細かく制御できる

例えば、フレームワークによってはスクロールによってdynamic regionが可視範囲に入ったタイミングまでhydrationを遅延することも可能です (例: Astroにおけるclient:visibleディレクティブなど)

単一のコンポーネント(例えば<App>のようなコンポーネント)を一括でhydrateするのではなく、dynamic region(Island)ごとに個別にhydrateするため、個々のdynamic region(Island)におけるコードサイズは小さくなることが期待できる

相性が良さそうなユースケース

Webサイト

動的または対話的な振る舞いが必要な箇所のみをdynamic region(Island)として実装することで、ページ全体が占めるJavaScriptサイズの削減が期待できそうです

Islands Architectureでも言及されているように、Micro Frontendsを実現するための手段としても活用できるかもしれません

いわゆる水平分割パターンによりMicro Frontendsを構築する場合、各チームが特定のdynamic region(Island)に責任を持つ、といった運用ができるかもしれません

サポートしているフレームワーク

Fresh - Deno+PreactベースのWebフレームワーク (Deno公式)

Ultra - Deno+ReactベースのWebフレームワーク

その他

Nuxt 3のv3.0.0-rc.10でZero-Client-JS Modeが実装されているようで、もしかしたら、Nuxt.jsでもサポートされる可能性があるのかもしれない？

リンク