Astro 5 の主な機能と注意点
一言まとめ
Astro 5.0 の Content Layer・Server Islands・Actions・astro:env、5.7 の Fonts API・Sessions・SVG コンポーネント。View Transitions が遷移時に html 要素の属性(lang・data-theme)をリセットする既知の問題と回避策。
調査時点: 2026-04。
Astro は、コンテンツ中心の Web サイトを作るためのフレームワーク。HTML を中心に出力し、対話が必要な部分だけに JavaScript を足す設計で、このブログもこれで動いている。
Astro 5.0(2024-12-03)
- Content Layer: 型安全なコンテンツ取得。Markdown のビルドが最大 5 倍高速。
- Server Islands: 静的 HTML と動的サーバーレンダリングを混在させ、個別にキャッシュ制御する。
- Astro Actions: 型安全なサーバーアクション。
- astro:env: 型安全な環境変数。
- Vite 6 統合。
Astro 5.7(2025-04-15)
- 実験的 Fonts API: Google / Fontsource / Bunny / Adobe / Fontshare から自動最適化付きで配信。
- Sessions API の安定化。
- SVG コンポーネント(
.svgをそのまま import)。 astro:configの安定化。
View Transitions が html 属性をリセットする
Astro の View Transitions は遷移時に <html> 要素の属性(lang・data-theme など)をリセットする(Issue #7765、#8341)。
writing-modeなどのスタイルは<html>ではなくコンテンツコンテナ(<main>/<div>)に付ける。<html>に属性を持たせる必要があるなら、astro:after-swapイベントで再適用する。
document.addEventListener("astro:after-swap", () => { document.documentElement.setAttribute("data-theme", localStorage.getItem("theme") ?? "light");});関連
更新履歴
- 2026-04-19: 初版(ローカル調査ノート)
- 2026-10-17: Wiki へ移植、概念ページとして再構成。冒頭に定義を追加