Island Architecture
何か
ページ内でサーバー側でレンダリングされる静的な部分とクライアント側で動的に生成される部分をそれぞれ独立して表示させる手法
いわゆるMPAというやつの一種
MPA(Multi Page Application)とは 従来のRailsやLaravelのように1リクエストで1レスポンスのHTMLをサーバー側で生成して表示するタイプのアプリ
クライアントサイドでHTMLを動的に生成してルーティングもフロントエンドで完結させるアプリ
Full Hydration vs Partial Hydrationの構図
なぜ使うか
パフォーマンスやリソースサイズの効率の向上のため
従来のSPAだとbundleサイズがデカくなる
<p>タグ一つ表示するために無駄にjsをいくつもDLしないといけなかったりする。確かに無駄。
Island Architectureなら基本は静的なHTMLなのでJSの動的レンダリングが減らせる
ReactやNext.jsのCSRやSSRへのアンチテーゼとして台頭してきた背景がある
どのように使うか
一般的には各種Island Architecture対応のFrameworkを使う
どのFrameworkもReactを使った既存のコンポーネント指向の実装と変わらないので敷居は低そう
いつ使うか(具体的な事例など)
大手サービスでの採用はまだ見たことない
無理してNext.jsで作らなくてもいいじゃんとかEdgeで動かしたいみたいなケースで採用するところも出てくるかも
とはいえまだどのFrameworkもv1に届くか届かないかみたいな状態で群雄割拠。軽く触る or 様子見でも良いかも。
その他
やっぱRailsでええやろがいおじさんが沸きがち
参考