/ astro / 私がブログにAstroを選んだ理由(そしてあなたもそうすべき理由)
astro 1 分で読めます

私がブログにAstroを選んだ理由(そしてあなたもそうすべき理由)

WordPress、Next.js、その他すべてでブログを構築してきた数年間の後、ついに理にかなったフレームワークを見つけました。

私は考えられるほぼすべてのプラットフォームでブログを構築してきました。

様々なテーマとページビルダーを使ったWordPress。すべてのGraphQL複雑性を持つGatsby。常に変化するappディレクトリを持つNext.js。静的シンプルさのためのJekyll。みんなが速いと言っていたからHugo。

それぞれに長所がありました。それぞれに私を完全に狂わせるものもありました。

そしてAstroを試してみたら、何かがクリックしました。

それが速いだけではありませんでした、確かに速いですが。良いSEOを持っているだけではありませんでした、確かに持っていますが。それはもっと根本的なことでした。コンテンツサイトを構築することがどのように感じるべきかについて、誰かが実際に考えたように感じました。

このブログにAstroを選んだ理由、そしてあなたにとっても正しい選択かもしれない理由を説明させてください。

他のすべての問題

Astroがなぜ機能するかに入る前に、なぜ他のオプションが機能しなかったかについて話させてください。

WordPressはほとんどの人にとって明らかな出発点です。馴染みがあります。何百万ものチュートリアルがあります。テーマをインストールして1時間で何か動くものを持つことができます。

しかし、実際に起こることはこうです..WordPressをインストールし、次にテーマが必要で、次にページビルダーが必要になります、なぜならテーマがあなたの望むことを正確にはしないからです、次にキャッシングプラグインが必要になります、なぜならページビルダーがすべてを遅くしたからです、次にSEOプラグイン、次にセキュリティプラグイン、次に画像最適化プラグインが必要になります。

気づく前に、15個のプラグインを管理し、サイトの読み込みに4秒かかり、実際に書くよりも更新とトラブルシューティングに多くの時間を費やしています。

私はその道を何度も通ってきました。

次に、モダンJavaScriptフレームワークルートがあります。パフォーマンスの問題を解決すると思って、Next.jsとGatsbyでブログを構築しました。

そして、それらは速くなることができます..すべてを完璧に設定すれば。しかし、複雑さは野生的です。サーバーサイドレンダリング、クライアントサイドハイドレーション、コード分割、バンドル最適化、そして百万の設定オプションを扱っています。

ブログのために。ほとんどがただのテキストと画像のサイトのために。

サンドイッチを切るためにチェーンソーを使っているように感じました。

コンテンツを書いているべき時に、ビルドが失敗している理由や特定のページが正しく生成されない理由を把握するのに何時間も費やしていました。

私が望んでいたのは、デフォルトで速く、作業がシンプルで、実際にコンテンツ重視のサイトのために設計された何かでした。

それがAstroです。

Astroを異なるものにするもの

Astroの背後にある核心的な洞察はかなりシンプルです..ほとんどのウェブサイトはすべてのページでJavaScriptを必要としません。

ブログ投稿について考えてみてください。それはほとんどただのHTMLとCSSです。いくつかのテキスト、いくつかの画像、おそらくコードブロック。あまりインタラクティビティはありません。なぜ静的コンテンツを表示するためだけに何百キロバイトのJavaScriptを送っているのでしょうか?

Astroの答えは、デフォルトでゼロJavaScriptを送ることです。

コンポーネントを書き、Astroがそれらをビルド時にHTMLにレンダリングし、それがブラウザに送られるものです。純粋で速いHTML。

コメントセクションや画像ギャラリーのようなどこかでインタラクティビティが必要な場合、彼らが「アイランドアーキテクチャ」と呼ぶものを使ってそのコンポーネントだけに追加できます。ページの残りは静的のままです。インタラクティブな部分だけがJavaScriptを取得します。

これはブログにとって素晴らしいです、なぜならコンテンツの95パーセントは静的だからです。ブログ投稿を表示するためだけにReactがページ全体をハイドレートする必要はありません。

パフォーマンスの差は巨大です。WordPressと比較して40から60パーセント速いTime to First Byteについて話しています。典型的なReactセットアップと比較して50から70パーセント小さいJavaScriptバンドル。

これらは小さな改善ではありません。これらは、より良いエンゲージメントと低いバウンス率としてあなたのアナリティクスに実際に現れる種類の利益です。

SEOの利点

これは私の最初のAstroブログを立ち上げるまで完全には理解していなかったことです..SEOの利点。

検索エンジンはクリーンなHTMLを持つ速いサイトが大好きです。それはまさにAstroがあなたに与えるものです。

Astroはデフォルトで静的HTMLを生成するため、すべてのページは即座にクロール可能です。検索エンジンはあなたのコンテンツを見るためにJavaScriptを実行する必要がありません。それはHTMLの中にすぐそこにあります。

これはあなたが思う以上に重要です。私はGoogleのクローラーがコンテンツを適切にレンダリングするのに苦労していたため、JavaScript重視のサイトがインデックスに苦労するのを見てきました。Astroでは、レンダリングするものは何もありません。コンテンツはすでにページソースにあります。

さらに、これらすべてのパフォーマンス向上はCore Web Vitalsスコアに直接影響します。Largest Contentful Paint、First Input Delay、Cumulative Layout Shift..Googleがランキングに使用するすべてのメトリクスは、巨大なJavaScriptバンドルを送っていないときに最適化しやすくなります。

私はAstroでApateroブログを立ち上げ、1か月以内に75,000インプレッションに達しました。それはすべてAstroのおかげでしたか?いいえ、他の要因がありました。しかし、技術的な基盤は絶対に役立ちました。

速いサイトはより良くランクします。それはそれほど簡単です。

開発者体験

さて、この部分はコードに慣れている場合により関連性がありますが、あなたが超技術的でない場合でも、聞いてください。

Astroは作業するのがただ気持ちいいです。

プレーンHTMLでコンポーネントを書くことができます。またはReact、Vue、Svelte、何でもあなたが慣れているものを使用できます。Astroは1つのフレームワークにあなたをロックしません。

ファイル構造は直感的です。ルートはファイル名に基づいています。/blogにページが欲しい?pages/blog.astroにファイルを作成します。完了。

MarkdownとMDXサポートが組み込まれており、これはブログに最適です。Markdownで投稿を書き、メタデータのためにフロントマターを追加し、Astroが残りを処理します。

複雑なビルド設定はありません。維持するwebpack設定はありません。デバッグに何時間もかかる謎のエラーはありません。

それはただ機能し、何かが機能しないとき、エラーメッセージは実際に意味を成します。

ビルドの問題で午後全体を失っていたNext.jsから来て、これはリフレッシュでした。

実際のパフォーマンス数値

「速い」は主観的なので、いくつかの具体的な比較をさせてください。

独立したベンチマークは、Astroがコンテンツサイトのために他のフレームワークを一貫して上回っていることを示しています。

Time to First ByteはWordPressより40-60パーセント速いです。

First Contentful PaintはGatsbyより30-50パーセント良いです。

Largest Contentful Paintは静的コンテンツのためのNext.jsと比較して25-45パーセント改善されています。

JavaScriptバンドルサイズは通常、Reactベースのフレームワークより50-70パーセント小さいです。

これらは厳選された数字ではありません。これは、Astroがアプローチする方法でコンテンツサイトを構築するときに起こることです..デフォルトで静的、必要な時だけJavaScript。

参考までに、Astroで構築されたこのブログテンプレートは、合計約184KBのバンドルサイズを持っています。それはすべてを含みます..フレームワーク、コンポーネント、スタイリング、すべて。

まともなテーマといくつかのプラグインを持つ同等のWordPressサイト?簡単に1MB以上。時には複数のメガバイト。

その違いはモバイルネットワークで重要です。その違いはSEOに重要です。その違いはユーザーエクスペリエンスに重要です。

コンテンツファーストの哲学

これが本当にAstroに私を売り込んだものです。

それはコンテンツサイトのために構築されています。eコマースではありません。ウェブアプリではありません。コンテンツ。

ドキュメンテーションは、あなたがブログやマーケティングサイトやドキュメンテーションサイトを構築していることを前提としています。例は関連性があります。機能はコンテンツのニーズに焦点を当てています。

組み込みのRSSフィード生成があります。サイトマップ生成。画像最適化。コンテンツサイトに必要なすべてのもの、ただ組み込まれています。

他のフレームワークはコンテンツサイトを後付けとして扱います。Astroはそれらを主な使用例として扱います。

その焦点はすべてをより簡単にします。ブログのために機能させるためにフレームワークと戦う代わりに、あなたがやっていることのために正確に設計されたフレームワークで作業しています。

Astroが正しくないかもしれないとき

これを過度に売り込みたくありません。Astroはすべてに完璧ではありません。

リアルタイムで更新されるソーシャルメディアフィードや、大量の状態管理を持つ複雑なダッシュボードのような、多くのクライアントサイドインタラクティビティが必要な場合、従来のSPAフレームワークの方が良いかもしれません。

コードにまったく慣れておらず、純粋にビジュアルなエディタが必要な場合、パフォーマンスのトレードオフにもかかわらず、ページビルダーを持つWordPressの方が簡単かもしれません。

WordPressエコシステムにのみ存在する特定のプラグインや統合が必要な場合、それはWordPressに留まる有効な理由です。

しかし、主な目標がコンテンツを公開し、検索エンジンでランクすることであるブログの場合?Astroは打ち負かすのが難しいです。

なぜ私はそれに戻り続けるのか

私はこの時点で複数のブログを構築してきました。新しいプロジェクトを始めるたびに、オプションを検討します。

エコシステムのためにWordPressを使うべき?React親しみのためにNext.js?何か他のもの?

そして毎回、私はAstroに戻ります。

なぜなら、私は他のフレームワークで作業していたときがどうだったかを覚えているからです。絶え間ないトラブルシューティング。プラグインの競合。バンドルサイズの不安。ビルド時間のフラストレーション。

Astroでは、私はただコンテンツを書き、それは機能します。ビルドは速いです。サイトは速いです。SEOは堅実です。開発者体験は快適です。

それがブログプラットフォームから私が望むものです。私は書くことに時間を費やしたいです、デバッグではなく。

結論

2025年にブログを始める場合、多くのオプションがあります。

WordPressを選んでプラグインの肥大化とパフォーマンスの問題に対処できます。

JavaScriptフレームワークを選んで複雑さと格闘できます。

またはAstroを試して、あなたが構築しようとしているもののために実際に設計されたフレームワークを手に入れることができます。

デフォルトで速い。本質的にSEOフレンドリー。作業がシンプル。コンテンツに焦点を当てている。

それが私がそれを選んだ理由です。それがこのテンプレートがそれで構築されている理由です。そしてそれがあなたがそれに挑戦すべきだと私が思う理由です。

私が見つけたように、あなたはそれがあなたが探していたものだと見つけるかもしれません。