Island Architecture https://mainawycliffe.dev/blog/island-architecture/

Astro, Qwik, Markoなどのコンセプトの下地にあるIsland Architectureについて

2022

mainawycliffe.dev

今までのアウトラインを含めた包括的な記事なのでこれを先に読んだ

2020

jasonformat.com

Island Architecture自体はPreact作者のこのブログ以降よく見るようになった

Island Architecture

• HTML/JavaScriptの配信とページのレンダリング戦略に特徴を持つ
• Islandアーキテクチャでは静的なHTMLとしてページをレンダリングして、さらに動的なコンポーネントを局所化してプログレッシブにHydrationしていくアプローチを取る
• この1つ1つのコンポーネントをIslandと呼ぶ
• 用語の元ネタはPHPアプリケーションのテンプレートをReactで書きたかったEtsyの人たち から来たとされている
• 実装にrequestIdleCallback APIを使用できる
  • requestIdleCallback
  • 実際に使われているかどうか知らない
• IslandはクライアントにはプレースホルダなViewとして到達する
• エントリーポイントが1つなSPAと対比してMPAと呼ばれることがある
  • SPAではページA→Bへの遷移はViewのトランジションとして処理されHydrationに必要なリソースは事前に取得するが、MPAではブラウザ上でのページ移動と一致するのでページBのエントリポイントではページBに必要なリソースだけをロードする

感想

• これは一見Jamstackアーキテクチャの中のSSG+CSRの発展形に思える
• NextやGatsbyで作成した静的ページをベースに一括生成が難しい(大量にページ生成が必要になってしまう)動的部分だけCSRで分けて作るという方法があったがそれを最適化して名前を付けた感じ
  • やりたいことは 新しいメルカリ Web のスタックも似ていそう
• 独立したIslandが存在するアプリケーションに向いているとされていて、それぞれのコンポーネント同士が動的に連動するとどうなるのか
• AstroにはさらにページごとのSSRがある
  • https://docs.astro.build/en/guides/server-side-rendering/
  • SSG+CSR+SSR
  • しかしそうなるとRSCと比べてどうなんだろう
  • 三文字用語が多過ぎる
• Fresh@Deno はRemix風インターフェイスとPreactによるIsland実装があっていいとこどり
• MarkoやQwikは更にチャンクやHydration戦略の実装に改善点があるらしいけど、そこまでは理解できてない
  • builder.ioはQwik開発元