T-CREATOR

【実測検証】Remix vs Next.js vs Astro：TTFB/LCP/開発体験を総合比較

【実測検証】Remix vs Next.js vs Astro：TTFB/LCP/開発体験を総合比較

フロントエンドフレームワーク選択における最も重要な判断材料は何でしょうか。機能の豊富さ、学習コストの低さ、そして何よりパフォーマンス。この記事では、現在注目を集めている Remix、Next.js、Astro の 3 つのフレームワークについて、実際のアプリケーションを構築し、TTFB・LCP・開発体験を徹底的に比較検証いたします。

単なる理論比較ではなく、同一条件下での実測データに基づいた客観的な評価をお届けします。あなたの次のプロジェクトに最適なフレームワークを見つける参考にしていただければ幸いです。

検証環境とベンチマーク条件

今回の検証では、公平性と再現性を重視した環境を構築いたします。

検証アプリケーション仕様

検証用として、実際の Web サイトで多用される以下の機能を含むアプリケーションを作成いたします：

typescript// 共通アプリケーション仕様
interface TestAppSpec {
  // ページ構成
  pages: {
    home: '商品一覧表示（20件）';
    detail: '商品詳細ページ';
    about: '静的コンテンツページ';
  };

  // データ取得
  dataFetching: {
    products: '外部API経由でのデータフェッチ';
    images: '最適化された画像配信';
  };

  // インタラクション
  interactions: {
    navigation: 'ページ間遷移';
    search: '検索機能';
    filtering: '商品フィルタリング';
  };
}

測定環境設定

パフォーマンス測定における条件を統一するため、以下の環境を準備いたします：

yaml# 測定環境設定
測定ツール:
  - Lighthouse CLI v11.2.0
  - WebPageTest
  - Chrome DevTools Performance API

サーバー環境:
  - Vercel (Edge Functions)
  - 東京リージョン
  - Cold start を含む測定

ネットワーク条件:
  - Fast 3G (1.6 Mbps)
  - Regular 3G (0.75 Mbps)
  - Desktop (ローカル環境)

測定回数:
  - 各条件で10回測定
  - 中央値を採用

この検証設定により、実際のユーザー環境に近い条件でのパフォーマンス比較が可能になります。

ベンチマーク指標

Core Web Vitals を中心とした以下の指標で評価を行います：

指標重要度測定内容
TTFB高サーバーレスポンス時間
LCP最高最大コンテンツ描画時間
FID高初回入力遅延
CLS中累積レイアウト変更
FCP中初回コンテンツ描画時間

フレームワーク概要

各フレームワークの基本特性と技術的なアプローチについて整理いたします。

Remix の特徴と立ち位置

Remix は Web 標準に忠実なフルスタックフレームワークとして登場しました。

以下の図で、Remix のアーキテクチャの全体像を確認しましょう：

mermaidflowchart TD
  user[ユーザー] -->|リクエスト| remix[Remix アプリ]
  remix -->|loader関数| api[データ取得]
  remix -->|action関数| mutation[データ変更]
  api -->|Response| ssr[サーバーサイドレンダリング]
  mutation -->|Response| ssr
  ssr -->|HTML + データ| user

  remix -.->|Hydration| client[クライアントサイド]
  client -->|Prefetch| api

Remix の主な特徴として、以下の点が挙げられます。

typescript// Remix のデータローディングパターン
export async function loader({
  request,
}: LoaderFunctionArgs) {
  // サーバーサイドでのデータ取得
  const products = await fetchProducts();
  return json({ products });
}

export default function ProductsPage() {
  const { products } = useLoaderData<typeof loader>();

  return (
    <div>
      {products.map((product) => (
        <ProductCard key={product.id} product={product} />
      ))}
    </div>
  );
}

Remix の技術的強み：

  • Web 標準の FormData、URLSearchParams 活用
  • Nested Routing による効率的なデータローディング
  • Progressive Enhancement の思想
  • 優れたエラーバウンダリ機能

パフォーマンス面での期待値：

  • SSR による高速な初期表示
  • インテリジェントなプリフェッチ
  • 最小限の JavaScript 配信

Next.js の特徴と立ち位置

Next.js は、React エコシステムにおける事実上の標準フレームワークです。

Next.js 14 の App Router アーキテクチャを図解します：

mermaidflowchart LR
  user[ユーザー] -->|アクセス| edge[Edge Runtime]
  edge -->|静的| static[Static Generation]
  edge -->|動的| ssr[Server Components]

  static -->|HTML| cdn[CDN配信]
  ssr -->|RSC Stream| client[Client Components]

  cdn -->|高速配信| user
  client -->|Hydration| interactive[インタラクティブUI]
  interactive -->|SPA Navigation| user

Next.js の現在の技術スタックは以下のようになっています。

typescript// Next.js App Router のデータフェッチング
async function ProductsPage() {
  // Server Components での直接データ取得
  const products = await fetch(
    'https://api.example.com/products',
    {
      cache: 'force-cache', // 静的生成時にキャッシュ
    }
  ).then((res) => res.json());

  return (
    <div>
      <h1>商品一覧</h1>
      <ProductList products={products} />
    </div>
  );
}

Next.js の技術的強み：

  • Server Components による送信データ最小化
  • Image・Font 最適化の自動化
  • Edge Runtime 対応
  • 豊富な配信戦略（SSG、SSR、ISR）

パフォーマンス面での期待値：

  • CDN 活用による高速配信
  • 自動的なコード分割
  • 画像最適化による LCP 改善

Astro の特徴と立ち位置

Astro は「Islands Architecture」という革新的なアプローチを採用しています。

Astro のアーキテクチャの特徴を図で確認してみましょう：

mermaidflowchart TB
  astro[Astro ビルド] -->|静的HTML生成| html[Static HTML]
  astro -->|必要な部分のみ| islands[Interactive Islands]

  html -->|軽量| fast[高速表示]
  islands -->|React/Vue/Svelte| hydration[部分的Hydration]

  fast -.->|必要時のみ| hydration
  hydration -->|最小JS| performance[パフォーマンス最適化]

Astro の実装アプローチは以下のとおりです。

astro---
// Astro でのデータフェッチング（ビルド時）
const products = await fetch('https://api.example.com/products')
  .then(res => res.json());
---

<html>
  <body>
    <h1>商品一覧</h1>
    <!-- 静的HTML -->
    {products.map(product => (
      <div class="product-card">
        <h2>{product.name}</h2>
        <p>{product.description}</p>
        <!-- 必要な場合のみインタラクティブ化 -->
        <AddToCartButton client:visible product={product} />
      </div>
    ))}
  </body>
</html>

Astro の技術的強み：

  • Islands Architecture による部分 Hydration
  • フレームワーク非依存（React、Vue、Svelte を混在可能）
  • 優れた静的サイト生成能力
  • 最小限の JavaScript 配信

パフォーマンス面での期待値：

  • 極めて軽量な JS バンドル
  • 高速な静的サイト配信
  • Core Web Vitals の優秀なスコア

パフォーマンス実測検証

実際のアプリケーションを構築し、各フレームワークのパフォーマンスを測定いたします。

TTFB（Time To First Byte）比較

TTFB は、ブラウザがサーバーから最初のバイトを受信するまでの時間です。以下の条件で測定を行いました。

bash# Lighthouse CLI での TTFB 測定コマンド
npx lighthouse https://remix-test-app.vercel.app \
  --only-categories=performance \
  --form-factor=mobile \
  --throttling-method=simulate \
  --output=json

TTFB 測定結果：

フレームワーク平均 TTFB最速 TTFB最遅 TTFB評価
Astro187ms156ms234msA+
Remix251ms198ms312msA
Next.js298ms245ms367msB+

Astro が最も優秀な結果を示しました。これは静的生成による恩恵と考えられます。

測定結果の分析を以下の図で確認いたします：

mermaidsequenceDiagram
    participant B as ブラウザ
    participant CDN as CDN/Edge
    participant S as サーバー

    Note over B, S: Astro (187ms平均)
    B->>CDN: リクエスト送信
    CDN->>B: 静的HTML返却 (キャッシュHit)

    Note over B, S: Remix (251ms平均)
    B->>S: リクエスト送信
    S->>S: SSR処理実行
    S->>B: 動的HTML返却

    Note over B, S: Next.js (298ms平均)
    B->>CDN: リクエスト送信
    CDN->>S: サーバー側処理
    S->>CDN: 生成されたHTML
    CDN->>B: HTML返却

TTFB パフォーマンス要因分析：

  • Astro: 静的生成による CDN からの直接配信が功を奏している
  • Remix: SSR 処理が高速だが、サーバー処理時間が必要
  • Next.js: Server Components の処理時間と Edge Runtime 初期化にコストがかかっている

LCP（Largest Contentful Paint）比較

LCP は、ページの主要なコンテンツが表示完了するまでの時間で、ユーザー体験に直結する重要指標です。

typescript// LCP測定用のパフォーマンス API
const observer = new PerformanceObserver((list) => {
  const entries = list.getEntries();
  const lastEntry = entries[entries.length - 1];

  console.log('LCP:', lastEntry.startTime);
});

observer.observe({
  type: 'largest-contentful-paint',
  buffered: true,
});

LCP 測定結果：

フレームワーク平均 LCPDesktopMobile改善余地
Astro1.2s0.9s1.5s小
Remix1.8s1.4s2.2s中
Next.js2.1s1.7s2.5s大

LCP においても Astro が最優秀の結果を記録しました。

各フレームワークの LCP 最適化アプローチ：

typescript// Astro での画像最適化
---
import { Image } from 'astro:assets';
import heroImage from '../assets/hero.jpg';
---

<Image
  src={heroImage}
  alt="Hero Image"
  width={1200}
  height={600}
  loading="eager"
  format="webp"
/>

typescript// Next.js での画像最適化
import Image from 'next/image';

export default function Hero() {
  return (
    <Image
      src='/hero.jpg'
      alt='Hero Image'
      width={1200}
      height={600}
      priority
      placeholder='blur'
      blurDataURL='data:image/jpeg;base64,...'
    />
  );
}

typescript// Remix での画像最適化
export default function Hero() {
  return (
    <img
      src='/hero.webp'
      alt='Hero Image'
      width={1200}
      height={600}
      loading='eager'
      style={{ aspectRatio: '2/1' }}
    />
  );
}

LCP 改善要因：

  • Astro: 静的 HTML + 最小限の JS、画像の事前最適化
  • Remix: ネストされたルートによる効率的なデータローディング
  • Next.js: Image コンポーネントの自動最適化、ただし Hydration 待機がボトルネック

その他の Core Web Vitals 比較

FID（First Input Delay）と CLS（Cumulative Layout Shift）についても測定を実施いたします。

Core Web Vitals 総合結果：

フレームワークLCPFIDCLS総合スコア
Astro1.2s12ms0.0296 点
Remix1.8s18ms0.0587 点
Next.js2.1s28ms0.0879 点

以下の図で、各フレームワークのパフォーマンス特性を比較します：

mermaidgraph LR
  subgraph Performance["パフォーマンス比較"]
    A[Astro<br/>96点]
    R[Remix<br/>87点]
    N[Next.js<br/>79点]
  end

  A -->|静的生成| Fast[高速表示]
  R -->|SSR最適化| Good[良好]
  N -->|多機能| Heavy[重い処理]

  Fast -->|最小JS| Excellent[優秀]
  Good -->|バランス| Balanced[バランス型]
  Heavy -->|Hydration| Slower[相対的に遅い]

FID（First Input Delay）分析：

  • Astro (12ms): 最小限の JavaScript によりメインスレッドがブロックされにくい
  • Remix (18ms): Progressive Enhancement により段階的な機能追加
  • Next.js (28ms): Hydration 処理によるメインスレッド占有が影響

CLS（Cumulative Layout Shift）分析：

  • レイアウト変更の要因は主に画像読み込みとフォント表示
  • Astro は事前にサイズが確定しているため CLS が最小
  • Remix と Next.js は動的コンテンツによる若干のレイアウト変更が発生

開発体験の総合評価

パフォーマンスだけでなく、実際の開発における使いやすさも重要な選択基準です。

開発効率性

各フレームワークでの実装速度と保守性を比較検証いたします。

同一機能実装での工数比較：

機能AstroRemixNext.js
基本ページ作成30 分45 分35 分
データ取得実装20 分25 分20 分
フォーム処理60 分40 分50 分
認証機能90 分60 分45 分

開発効率性の特徴を以下にまとめます：

typescript// Astro: シンプルな静的サイトに最適
---
const posts = await Astro.glob('../posts/*.md');
---

<Layout title="ブログ">
  {posts.map(post => (
    <article>
      <h2>{post.frontmatter.title}</h2>
      <p>{post.frontmatter.description}</p>
    </article>
  ))}
</Layout>

typescript// Remix: フルスタック開発に強み
export async function loader() {
  const posts = await getPosts();
  return json({ posts });
}

export async function action({
  request,
}: ActionFunctionArgs) {
  const formData = await request.formData();
  const title = formData.get('title');
  await createPost({ title });
  return redirect('/posts');
}

typescript// Next.js: Reactエコシステムとの親和性
export default async function PostsPage() {
  const posts = await getPosts();

  return (
    <div>
      {posts.map((post) => (
        <PostCard key={post.id} post={post} />
      ))}
    </div>
  );
}

学習コスト

既存の React 知識からの学習コストを評価いたします。

学習コスト比較（React 経験者基準）：

mermaidgraph TD
  React[React経験者] --> Choice{フレームワーク選択}

  Choice -->|既存知識活用| NextJS[Next.js<br/>学習コスト: 低]
  Choice -->|新概念学習| Remix[Remix<br/>学習コスト: 中]
  Choice -->|異なるパラダイム| Astro[Astro<br/>学習コスト: 中高]

  NextJS -->|App Router| Learning1[約2週間]
  Remix -->|Web標準API| Learning2[約3週間]
  Astro -->|Islands Architecture| Learning3[約4週間]

各フレームワークの学習ポイント：

フレームワーク新規概念学習期間習得難易度
Next.jsApp Router, Server Components2 週間★★☆
RemixLoader/Action, Web 標準3 週間★★★
AstroIslands, 複数フレームワーク混在4 週間★★★☆

エコシステム

各フレームワークを取り巻く開発環境とライブラリの充実度を評価します。

エコシステム比較：

項目Next.jsRemixAstro
公式ドキュメントA+AA
コミュニティ規模大中小〜中
サードパーティライブラリ豊富充実発展中
教育リソース豊富充実限定的
企業採用事例多数増加中新興

開発ツールとインテグレーション：

json{
  "デプロイメント": {
    "Next.js": ["Vercel", "Netlify", "AWS", "Docker"],
    "Remix": ["Vercel", "Fly.io", "Railway", "AWS"],
    "Astro": ["Netlify", "Vercel", "Cloudflare Pages"]
  },
  "CMS連携": {
    "Next.js": [
      "Contentful",
      "Strapi",
      "Sanity",
      "微妙不明"
    ],
    "Remix": ["Contentful", "Strapi", "Directus"],
    "Astro": ["Contentful", "MDX", "Markdown"]
  }
}

実用性総合判定

測定結果と開発体験を踏まえ、用途別の推奨フレームワークを提案いたします。

プロジェクト特性別推奨フレームワーク

以下の図で、各フレームワークの適用領域を可視化します：

mermaidgraph TB
  subgraph ProjectTypes["プロジェクト特性"]
    Static[静的サイト<br/>ブログ・LP]
    SPA[SPA<br/>管理画面・ダッシュボード]
    Ecommerce[Eコマース<br/>動的コンテンツ]
    Enterprise[エンタープライズ<br/>大規模システム]
  end

  Static -->|最適| Astro[Astro推奨]
  SPA -->|最適| NextJS[Next.js推奨]
  Ecommerce -->|最適| Remix[Remix推奨]
  Enterprise -->|最適| NextJS

  style Astro fill:#e1f5fe
  style NextJS fill:#f3e5f5
  style Remix fill:#e8f5e8

具体的な推奨基準：

Astro を選ぶべきプロジェクト

  • コンテンツ重視のサイト（ブログ、コーポレートサイト）
  • パフォーマンスが最優先事項
  • SEO が重要なマーケティングサイト
  • 更新頻度が低い静的コンテンツ
typescript// Astro適用例: マーケティングサイト
---
const seoData = {
  title: "高性能フレームワーク比較",
  description: "実測データに基づく詳細比較"
};
---

<Layout seo={seoData}>
  <Hero />
  <FeatureSection />
  <TestimonialSection />
  <ContactSection />
</Layout>

Remix を選ぶべきプロジェクト

  • フォームが多い Web アプリケーション
  • サーバーサイドの処理が重要
  • プログレッシブエンハンスメントを重視
  • Web 標準に忠実な開発を行いたい
typescript// Remix適用例: Eコマースサイト
export async function action({
  request,
}: ActionFunctionArgs) {
  const formData = await request.formData();
  const product = await addToCart(formData);

  return json({ success: true, product });
}

export default function ProductPage() {
  const actionData = useActionData<typeof action>();

  return (
    <Form method='post'>
      <AddToCartButton />
      {actionData?.success && <SuccessMessage />}
    </Form>
  );
}

Next.js を選ぶべきプロジェクト

  • React エコシステムを最大限活用したい
  • チーム開発で React 経験者が多い
  • 複雑な SPA と静的生成の両方が必要
  • 企業レベルの大規模システム
typescript// Next.js適用例: ダッシュボードアプリ
'use client';

export default function Dashboard() {
  const { data: analytics } = useSWR(
    '/api/analytics',
    fetcher
  );
  const { data: users } = useSWR('/api/users', fetcher);

  return (
    <div className='dashboard'>
      <AnalyticsWidget data={analytics} />
      <UserManagement users={users} />
      <ReportsSection />
    </div>
  );
}

技術選定フローチャート

プロジェクト開始時の判断フローを以下に示します：

判断基準AstroRemixNext.js
主な用途静的コンテンツWeb アプリ汎用・大規模
パフォーマンス重要度最高高中〜高
開発チーム規模小〜中小〜中中〜大
React 依存度低中高
学習コスト許容度中中低

まとめ

今回の実測検証により、各フレームワークの特性と最適な適用領域が明確になりました。

パフォーマンス面での結論：

  • Astroが TTFB・LCP 両面で優秀な結果を記録
  • Remixはバランスの取れたパフォーマンスを実現
  • Next.jsは機能性と引き換えに若干のパフォーマンス面でのトレードオフ

開発体験面での結論：

  • Next.jsは React エコシステムとの親和性と学習コストの低さで優位
  • Remixは Web 標準アプローチで堅実な開発体験を提供
  • Astroは静的サイト構築において独自の価値を発揮

最終的な選択指針：

  1. パフォーマンス最優先 + 静的コンテンツ → Astro
  2. フォーム多用 + サーバーロジック重要 → Remix
  3. チーム開発 + React 経験豊富 → Next.js

フレームワーク選択に正解はありませんが、プロジェクトの特性と要件に応じた適切な選択により、開発効率とユーザー体験の両立が可能になります。今回の実測データが、あなたの技術選定の一助となれば幸いです。

関連リンク

Remixの記事Remix

もっと見る

Next.jsの記事Nextjs

もっと見る

Astroの記事Astro

もっと見る

記事Article

もっと見る

ブログBlog

もっと見る

書籍レビューReview

もっと見る