#Astro

pi.dev + Qwenでアイドルレーベルサイトを作ったら、生成画像を全部サボってSVGプレースホルダーで納品しそうになった失敗記録

8月3日公開のNext.js 16.3をAstro 7.1、Nuxt 4.5と並べ、同一デザインのブログをM4 Mac miniで3つ実装して実測した。見た目はピクセル一致でも、クライアントJSはNext.js 172KB、Nuxt 21.5KB、Astro 0KBと桁で差が付いた。

Astro 6.1.3で動く記事1558本の個人ブログをAstro 7へ上げる実作業ログ。remark/rehype廃止（Sätteri）の回避策、@astrojs/vercel v11必須化、Vite 8対応など、コンテンツ量の多いサイトで実際に踏む手順と詰まりどころを残す。

Astro 6系のVercelビルドで、生成された `_astro/*astro_type_script*` チャンクが esbuild の parse error を起こした。TypeScript 構文を剥がすだけでは直らず、`public/vendor` 経由で Astro の script 変換パイプラインを避けると安定した。

Astro 6.0ベースのフルスタックサーバーレスCMS「EmDash」が登場。V8 isolateによるプラグインサンドボックスでWordPressのプラグイン脆弱性問題に終止符を打つ。

Astro 6.0が2026年3月10日にリリース。Fonts API、CSP、Live Collections、実験的Rustコンパイラなど新機能と、Zod 4・Vite 7・Node 22必須化などの破壊的変更を整理し、Astro 5系プロジェクトからの移行ポイントをまとめた。

記事にWebM/MP4を埋め込むとページが重くなる。preload="metadata"で最初のフレームだけ読み込み、クリックで再生開始する仕組みをrehypeプラグインで実装した。

Astro公式推奨のPartytownを使ってGA4を導入する方法。Web Workerで実行することでメインスレッドをブロックせず、Core Web Vitalsを維持できる。

Mintlifyで発見された脆弱性とReact2Shellの違いを解説。フレームワーク側の問題と実装者側の問題を区別することの重要性について。

静的サイトに検索機能がない問題を、Pagefindを使って解決。ビルド時にインデックス生成、クライアント側でWASM検索という軽量な構成。

CVSS 10.0のReact2Shell、修正したら別の脆弱性、また修正…。もう疲れたのでAstroに移行した。shadcn UIを60個入れて1個しか使ってなかった反省も込めて。

Astroの<style>タグはスコープドCSSとしてコンパイルされるが、JavaScriptで動的生成したDOM要素には適用されない。解決策を解説。