Astro と Next.js 比較：パフォーマンスの違いとそのメカニズム#

Next.js のハイドレーションモデル#

Next.js では、サーバーサイドレンダリング（SSR）によって HTML が生成されクライアントに送信されますが、その後クライアント側で「ハイドレーション」と呼ばれるプロセスが発生します。

このハイドレーションプロセスは以下のように機能します：

1. サーバーから初期 HTML が送信される
2. クライアント側で JavaScript がロードされる
3. ReactDOM.hydrate() が実行され、document.getElementById('__next') などで DOM 要素を特定
4. React のコンポーネントツリーが再構築され、イベントリスナーが取り付けられる

重要なポイント: Next.js では、ページ全体が一括でハイドレーションされます。つまり、静的なコンテンツ部分も含めて全てのコンポーネントが JavaScript によって管理される状態になります。これが初期表示速度に影響を与える主な原因です。

Astro のアイランドアーキテクチャ#

一方、Astro は「アイランドアーキテクチャ」と呼ばれる新しいアプローチを採用しています。これは以下のような特徴を持ちます：

1. ページの大部分は純粋な静的 HTML として配信（JavaScript なし）
2. インタラクティブな要素（「アイランド」）のみが選択的にハイドレーションされる
3. client:load、client:visible などのディレクティブを使用して、いつ/どのようにコンポーネントをハイドレーションするか細かく制御できる

例えば、以下のようなコードでは：

<header>静的なヘッダー部分</header>

<ProductSlider client:load />

<footer>静的なフッター部分</footer>

ProductSlider コンポーネントだけが JavaScript によってハイドレーションされ、ヘッダーとフッターは純粋な HTML のままです。

JavaScript ペイロードの削減#

Astro のアプローチでは、必要最小限の JavaScript だけがクライアントに送信されます。これにより：

• ダウンロードする JavaScript の量が大幅に削減される
• パースと実行にかかる時間が短縮される
• 特にモバイルデバイスでの読み込み時間が改善される

インタラクティブになるまでの時間#

Next.js では、ページ全体のハイドレーションが完了するまで完全にインタラクティブにはなりません。一方、Astro では：

• 静的コンテンツはすぐに表示され操作可能
• インタラクティブな要素のみが必要に応じてハイドレーションされる
• client:visible などのディレクティブを使用すれば、画面に表示されたときだけハイドレーションを行うことも可能

Next.js のアプローチ#

Next.js では、全てのページコンポーネントは基本的に React コンポーネントとして実装されます。サーバーサイドレンダリングにより初期 HTML が生成されますが、クライアント側での完全なハイドレーションが前提となります。

// Next.jsの例
export default function ProductPage({ product }) {
  return (
    <div>
      <Header />
      <ProductDetails product={product} />
      <RelatedProducts products={product.related} />
      <Footer />
    </div>
  );
}

この場合、静的な要素（ヘッダーやフッターなど）も含めて全体が JavaScript でハイドレーションされます。

Astro のアプローチ#

Astro では、基本的に.astroファイルは静的 HTML として出力され、必要な部分のみをインタラクティブにすることができます。

---
// .astroファイルのフロントマター部分
import Header from '../components/Header.astro';
import Footer from '../components/Footer.astro';
import ProductDetails from '../components/ProductDetails.jsx';
import RelatedProducts from '../components/RelatedProducts.jsx';

const { product } = Astro.props;
---

<Header />
<ProductDetails client:load product={product} />
<RelatedProducts client:visible products={product.related} />
<Footer />

この例では：

• ヘッダーとフッターは純粋な静的 HTML として出力される
• 商品詳細はページ読み込み時にハイドレーションされる
• 関連商品は画面に表示されたときにのみハイドレーションされる