爆速静的サイトジェネレーターとして人気の「Astro」フレームワークを使って、WordPressのHeadlessブログを作ってみました。
Astroについて
Astroは、コンテンツにフォーカスした高速なWebサイトを構築するためのオールインワンWebフレームワークです。
Astro Docs
Astroの日本語ドキュメントにあるように、Astroは単なる静的サイトジェネレーターではなく、マルチページアプリケーションフレームワークの一つで、サーバーレンダリングに特化した特徴を持っています。
Reactのような、いわゆるシングルページアプリケーションフレームワークとは異なり、JavaScriptの実行をあまり必要とせず、初回ロードが極めて高速なコンテンツ重視のWebサイトを作ることができます。
このサイトの構成
このサイトは、WordPressで記事を作成し、Astroで静的サイトとしてビルドしています。
WordPress側は「SWELL」テーマを使用しており、いくつかのカスタムブロックをAstroで再構築しています。
WordPressとAstroの接続に関しては、こちらの記事にて概要を説明しています。
WordPressとの接続はWP REST APIのみを使っており、APIベースのMicroCMSなどと比較すると記事データ取得に制約があったりするので少しわかりにくい部分もありました。
最終的に上記解説記事からかなり踏み込んだ構成になっているので、そのうち当サイトにて解説していけたらと思います。
Astroを使った感想
Astro自体は、日本語ドキュメントが充実していたので、インストールから構築までをスムーズに行うことができました。
ReactベースのNext.jsやGatsbyなどを触っていた経験からすると、より直感的にコンポーネント運用や動的ルーティングを行えると感じました。
初回ロードは確かに高速で、SPAが得意な画面遷移の連続性にそこまでこだわりがないのであれば、ブログやLPのようなコンテンツには「あり」かと思いました。まだ環境構築がこなれていないので、慣れてきたら仕事にも活用してみようと思います。