2025/01/02

【実践レポート】ブログをAstroで作ってみた！驚くほど快適な開発体験を徹底解説

📑 目次

こんにちは、KnowHack（ノウハック）です。

このブログはAstroというフレームワークで作っています。今回は実際の開発を通して感じたAstroの特徴と利点について、具体的な実装例を交えながら解説していきたいと思います。

選択の背景：Next.js vs Astro

フレームワークの選定において、「Next.jsで実装するか、Astroで実装するか」という判断で悩みました。Next.jsはReactベースで広く使われているフレームワークであり、私自身も開発経験がありました。

しかし、今回はブログサイトという特性上、複雑なインタラクションはそれほど必要なく、コンテンツの表示を最優先したかったため、Astroを採用することにしました。

Astroを採用して感じた5つの利点

1. サーバーサイドレンダリングの設計思想

最近のNext.jsでは、Client ComponentsとServer Componentsの使い分けを意識する必要があります。一方、Astroは基本的にサーバーサイドでレンダリングされる設計になっているため、その判断に悩む機会が少なくなります。

「このコンポーネントはクライアントで実行すべきか、サーバーで実行すべきか」という判断が不要になることは、開発効率の観点で大きなメリットでした。

2. 柔軟なReactコンポーネントの統合

例えば、このブログのモバイルメニュー（ハンバーガーメニュー）はReactコンポーネントを使用していますが、Astroではこれが非常にシンプルに実装できます。

---
// モバイルメニューだけReactを使う例
import MobileMenu from '../components/MobileMenu.jsx'
---

<header>
  <!-- 通常のAstroコンポーネント -->
  <nav class="desktop-menu">...</nav>
  
  <!-- Reactで作ったモバイルメニュー -->
  <MobileMenu client:load />
</header>

このように、必要な箇所だけReactを活用できる柔軟性は、実装の自由度を高めています。

3. マークダウンによる固定ページの管理

運営者情報ページやプライバシーポリシーなどの固定ページは、マークダウンで管理できます。Astroにはこの機能が標準で組み込まれており、フロントマターでメタ情報も設定できるためSEO対策も容易です。

---
title: プライバシーポリシー
description: KnowHackのプライバシーポリシーについて
---

# プライバシーポリシー
...

4. 充実した標準機能

ブログに必須のページネーション機能も、Astroには標準でAPIが用意されています。

export async function getStaticPaths({
  paginate,
}: {
  paginate: PaginateFunction;
}) {
  const posts = await getPosts({
    fields: "id,title,category,eyecatch,publishedAt",
    limit: 100,
  });

  return paginate(posts.contents, { pageSize: POSTS_PER_PAGE });
}