BlogをSvelteKitからAstroに移行しました

ブログのフレームワークを SvelteKit から Astro に移行しました。

SPA から MPA へ

これまでは SvelteKit を使用していましたが、Astro に切り替えることにしました。 主な理由は、ブログのような静的なコンテンツが中心のサイトにおいて、SPA (Single Page Application) よりも MPA (Multi-Page Architecture) の方がシンプルで適していると感じたからです。

• 不要な JavaScript の読み込みを減らせる
• 各ページが独立しているため、構造が直感的
• サーバーサイドでのレンダリングが基本となるため、SEO や初期表示に有利

SPA 特有の画面遷移時の滑らかさも魅力ですが、個人のブログとしてはシンプルさを優先したいと考えました。

Astro と Svelte の強力な連携

Astro への移行を決めつつも、UI フレームワークとしての Svelte は引き続き活用したいと考えていました。 Astro は @astrojs/svelte インテグレーションを追加することで、.astro ファイルや .mdx ファイルの中で直接 Svelte コンポーネントを呼び出すことができます。

この仕組みの素晴らしい点は、「必要な部分だけ」をインタラクティブにできることです。 静的なテキスト部分は HTML として出力し、動的な機能が必要な部分だけ JavaScript を実行させる Island Architecture がブログとの相性抜群です。

Svelte コンポーネントの動作デモ

以下は実際に .mdx 内に配置した Svelte 5 の Counter.svelte コンポーネントです。

- 0 +

💡 このカウンターは Svelte の $state ルーンを使用して実装されています。

このように、Markdown で記事を書きながら、必要に応じてリッチなコンポーネントを埋め込めるのが Astro の大きな魅力です。

今後も気ままに記事を更新していこうと思います。