アイランドアーキテクチャ
事前レンダリングしたHTMLと、インタラクティブなアイランドの選択的ハイドレーションを組み合わせます。
「アイランドアーキテクチャ」はCoddyKit上の無料Sveltejs Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはSveltejs Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Sveltejs Academyコースには全4レッスンが含まれています。
Islandsの定義
Islandsアーキテクチャは、ほぼ静的なHTMLと、個別にHydrationされる独立したインタラクティブコンポーネント（Islands）を組み合わせます。
Islandsを使う理由
インタラクティブ性が必要な部分だけをHydrationすることで、JavaScript全体の量を減らします。TTIも短縮できます。
Astroの影響
Astroがこのパターンを普及させました。SvelteKitでも、プリレンダリングと選択的なHydrationによって採用できます。
SvelteKitでの実装
ページをプリレンダリングしてssr = trueを使用し、特定のコンポーネントを遅延読み込みしてインタラクティブ性を後回しにします。
コード分割
SvelteKitはルート単位で分割します。さらに分割するには、ページ内で動的なimport()を使用します。
静的部分と動的部分
マーケティングページを静的にし、「Subscribe」フォームを動的にHydrationされるIslandにできます。
パフォーマンス指標
JavaScriptペイロードが小さくなり、Largest Contentful Paintが速くなり、Core Web Vitalsが改善します。
トレードオフ
アーキテクチャが複雑になります。静的部分と動的部分を混在させるには、慎重な計画が必要です。
エッジ SSR
アイランドとエッジ SSR を組み合わせることで、グローバルに高速な初回描画と最小限の JS を実現できます。
フレームワーク
Astro はアイランド向けに設計されており、Qwik の再開可能性はこの考え方をさらに発展させています。
使用する場面
コンテンツが中心で、時折インタラクティブ性が必要なサイトです。ブログ、ドキュメント、e コマースなどが該当します。
確認
アイランドアーキテクチャの特徴は何でしょうか？
まとめ
アイランドアーキテクチャは、静的な HTML と選択的にハイドレーションするインタラクティブなコンポーネントを組み合わせ、最小限の JS と高速な TTI を実現します。
よくある質問
「アイランドアーキテクチャ」レッスンは無料ですか？
はい。「アイランドアーキテクチャ」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Sveltejs Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Sveltejs Academyコースには全4レッスンが含まれています。
「アイランドアーキテクチャ」で何を学びますか？
事前レンダリングしたHTMLと、インタラクティブなアイランドの選択的ハイドレーションを組み合わせます。 ブラウザで直接実行するハンズオンコードでSveltejs Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Sveltejs Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのSveltejs Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。
「アイランドアーキテクチャ」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このSveltejs Academyレッスンでコードを書いて実行できますか？
はい。すべてのSveltejs Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。