アーキテクチャ・ホワイトペーパー•Naif•
コアウェブバイタル100/100を目指すゼロJS Webアプリケーションの設計
Islandsアーキテクチャと選択的ハイドレーションを深掘り。Webアプリケーションにおける最終的な最適化とは、JavaScriptを少なく出荷することこそ最良の最適化になる理由。
シングルページアプリ(SPA)が現代の性能を裏切っている理由
過去10年、WebエンジニアリングはクライアントサイドのJavaScriptフレームワークに強く依存してきました。開発者体験は良好ですが、そのかわりに重いハイドレーション税、膨らんだバンドルサイズ、そしてTime-to-First-Byte(TTFB)の悪化を持ち込みます。
Islandsアーキテクチャのパラダイム
Astroは現代の Islandsアーキテクチャ を切り拓きました。
- デフォルトで、ページはビルド時に100%純セマンティックなHTMLとCSSとしてプリレンダリングされます。
- JavaScriptはビルド出力から完全に除去されます。
- 特定の動的なウィジェット(例:インタラクティブなフィルタバー、検索のオートコンプリート、問い合わせフォーム)だけを
client:idleやclient:visibleで宣言します。
測定可能な結果
- ペイロード90%減:初期HTMLペイロードが480KBから24KBへ。
- ハイドレーション遅延ゼロ:メインスレッドのCPUアイドル時間が300ms以上改善し、実環境で4Gモバイルを使う端末でもINPが30ms未満に収まります。
N
Naif
フルスタックソフトウェアエンジニア & サーバーレスアーキテクト
サブ100msのJamstackプラットフォーム、ゼロJSのIslandsアーキテクチャ、Cloudflare Edgeでのクラウドコスト最適化を専門としています。