上位5フレームワークで全GitHubスターの大半を占めるという指摘がある一方、企業案件のリプレースは長期化（18〜24カ月規模）しがちだという報告もある。2024年にはCore Web Vitalsの主要指標がINPへ移行し¹、クライアント側の水和コストが相互作用遅延（INP）を通じてビジネスKPIに影響しうる構図がより明確になった²⁵。選定ミスはページ単価の悪化、広告ROI低下、開発チームの生産性毀損へ直結する。ここではランキングの表層に流されず、意思決定を標準化する2025年版チェックリストと、主要フレームワークの実装・性能・ROIを同一条件で検証した結果を提示する。

評価軸チェックリスト（2025版）と前提環境

評価基準と重み付け

ランキングではなく、意思決定を定量化するための評価軸を定義する。下表はプロダクション可用性と運用コストを両立するための重み付け（合計100）。

選定プロセスは次の手順で標準化できる。

1. 候補3件を仮決定（例：Next.js、SvelteKit、Astro）。
2. 共通要件（SSR、国際化、フォーム、画像最適化、認証、CMS連携）をテンプレ化。
3. 下記のリファレンス実装を1スプリントで実装。
4. 同一CI/CD上でベンチマーク実行、スコアリング。
5. ROI（開発/運用/トレーニング）を3年NPVで補正、最終決定。

測定環境（共通条件）

主要フレームワークの実装パターンと落とし穴

Next.js 14（App Router, RSC, Edge対応）

サーバコンポーネントとストリーミングでTTFBを抑えつつ、クライアント水和を最小化できる²。ISRと段階的静的再生成で運用コストも低い。

実装例：Route Handler + キャッシュ + エラーハンドリング

async function fetchProducts() { const res = await fetch(${process.env.API_BASE}/products, { next: { revalidate: 60 } }); if (!res.ok) throw new Error(API error: ${res.status}); return res.json(); }

const cached = unstable_cache(fetchProducts, [‘products’], { revalidate: 60 });

export async function GET(_req: NextRequest) { const t0 = performance.now(); try { const data = await cached(); const t1 = performance.now(); return NextResponse.json({ data, ms: Math.round(t1 - t0) }, { headers: { ‘Cache-Control’: ‘s-maxage=60, stale-while-revalidate=300’ } }); } catch (e: any) { console.error(e); return NextResponse.json({ error: ‘failed_to_load’ }, { status: 502 }); } }

<p><strong>ポイント</strong>：RSCでフェッチをサーバ側に寄せると水和負荷が減り、INPの改善に寄与しやすい<sup>2</sup>。Edge Runtimeに乗せると地理的TTFBが安定する。</p>
<h3><strong>Nuxt 3（Nitro, Island, Hybrid SSR）</strong></h3>
<p>サーバルートの規約とNitroデプロイ先の広さが強み。型定義と自動インポートでDXが高い。</p>
<p><strong>実装例：APIルート + キャッシュ制御 + エラーハンドリング</strong></p>
```typescript
// server/api/search.get.ts
import { defineEventHandler, getQuery, setResponseHeader } from 'h3';

export default defineEventHandler(async (event) => {
  const q = getQuery(event);
  const qStr = (q.q as string) || '';
  try {
    setResponseHeader(event, 'Cache-Control', 's-maxage=30, stale-while-revalidate=120');
    const res = await fetch(`${process.env.API_BASE}/search?q=${encodeURIComponent(qStr)}`);
    if (!res.ok) {
      return { error: 'upstream_error', status: res.status };
    }
    const data = await res.json();
    return { items: data.items?.slice(0, 10) ?? [] };
  } catch (err) {
    console.error(err);
    event.node.res.statusCode = 502;
    return { error: 'bad_gateway' };
  }
});

ポイント：Nuxtのroute rulesとpresetでCDNキャッシュを明示すると国際流通サイトのLCPが安定。

SvelteKit 2（サーバ優先 + 低水和）

コンパイラ主導の最小ランタイム。フォーム強化によりクライアントJS削減が容易³。

実装例：サーバエンドポイント + クライアントロードのエラーハンドリング

export async function GET() { try { const res = await fetch(${process.env.API_BASE}/posts); if (!res.ok) throw error(502, ‘upstream error’); const posts = await res.json(); return json({ posts }); } catch (e) { return json({ error: ‘failed’ }, { status: 502 }); } }

```svelte
<!-- src/routes/+page.svelte -->
<script lang="ts">
  import { onMount } from 'svelte';
  let posts: any[] = []; let err: string | null = null;
  onMount(async () => {
    try {
      const res = await fetch('/posts');
      if (!res.ok) throw new Error(String(res.status));
      const json = await res.json();
      posts = json.posts;
    } catch (e) { err = 'load_failed'; }
  });
</script>
{#if err}<p>{err}</p>{/if}
<ul>{#each posts as p}<li>{p.title}</li>{/each}</ul>

ポイント：SvelteKitはフォームアクション等で「JSゼロ」パターンを選びやすく、不要な水和を避けやすい³。

Astro 4（Island Architecture）

静的優先。必要な箇所だけをIslandで動的化し、LP/記事で強いLCPを出しやすいことが実地レポートでも示されている⁵。

実装例：.astro + React Island + 遅延水和 + 例外処理

{hero.title}

<p><strong>ポイント</strong>：<strong>SSR + hydration</strong>でもSignalsで再計算が抑制され、INPの悪化を防ぎやすい。チームスケールでDXが安定。</p>
<h3><strong>Qwik/Qwik City（Resumability）</strong></h3>
<p>水和不要のResumable戦略で相互作用を即時化<sup>4</sup>。複雑UIでのメリットが大きい。</p>
<p><strong>実装例：Resumableイベント + サーバローダ + エラー処理</strong></p>
```tsx
// src/routes/index.tsx
import { component$, useSignal, $, routeLoader$ } from '@builder.io/qwik';

export const useProducts = routeLoader$(async () => {
  const r = await fetch(process.env.API_BASE + '/products');
  if (!r.ok) throw new Error('upstream_error');
  return r.json();
});

export default component$(() => {
  const count = useSignal(0);
  const onInc = $(() => { count.value++; });
  const products = useProducts();
  return (
    <>
      <button onClick$={onInc}>+ {count.value}</button>
      <ul>{products.value.items?.map((p:any)=> <li key={p.id}>{p.name}</li>)}</ul>
    </>
  );
});