メインコンテンツへスキップ
Code & Craft
Web制作 約10分で読めます

Astro Hybrid Rendering完全ガイド｜静的・動的コンテンツを自動切り分けてパフォーマンスとSEOを両立する方法【2026年4月最新】

Astro 5.0で正式版となったHybrid Renderingの実装方法を徹底解説。静的ページとサーバーサイドレンダリングを1つのプロジェクトで使い分け、Core Web Vitalsを最適化しながら動的コンテンツを配信する実践ガイド。

Astro Hybrid Renderingとは？なぜ今注目されるのか

従来のWebサイト構築では「完全静的サイト（SSG）」か「サーバーサイドレンダリング（SSR）」のどちらかを選ぶ必要がありました。しかし、実際のプロジェクトでは「ブログ記事は静的にしたいが、ユーザーダッシュボードは動的に表示したい」といったページごとに異なるレンダリング戦略が必要なケースが増えています。

Astroは2026年1月にリリースされたAstro 5.0で、Hybrid Renderingモードを正式版として提供開始しました。これにより、同一プロジェクト内で静的ページと動的ページを混在させ、ルートごとに最適なレンダリング方法を自動選択できるようになりました。

本記事では、Astro 5.0の公式ドキュメントとリリースノート、実際の導入事例をもとに、Hybrid Renderingの実装方法から実運用のベストプラクティスまでを解説します。

Hybrid Renderingの仕組みとメリット

レンダリング方法の自動切り分け

Astroのデフォルトは**静的サイト生成（SSG）**ですが、output: 'hybrid'を設定することで、特定のページだけをSSRに切り替えられます。

// astro.config.mjs
import { defineConfig } from 'astro/config';
import vercel from '@astrojs/vercel/serverless';

export default defineConfig({
  output: 'hybrid', // Hybrid Renderingを有効化
  adapter: vercel(), // デプロイ先のアダプター
});

この設定により、すべてのページはデフォルトで静的生成され、個別にSSRを指定したページのみサーバーサイドでレンダリングされます。

ページ単位でのprerender設定

静的にしたいページにはexport const prerender = true、動的にしたいページにはexport const prerender = falseを記述します。

---
// src/pages/blog/[slug].astro（静的ページ）
export const prerender = true; // ビルド時に事前生成

export async function getStaticPaths() {
  const posts = await fetch('https://api.example.com/posts').then(r => r.json());
  return posts.map(post => ({
    params: { slug: post.slug },
    props: { post }
  }));
}

const { post } = Astro.props;
---
<h1>{post.title}</h1>
<p>{post.content}</p>
---
// src/pages/dashboard.astro（動的ページ）
export const prerender = false; // リクエストごとにサーバーでレンダリング

const user = Astro.cookies.get('user_id');
const data = await fetch(`https://api.example.com/user/${user}`).then(r => r.json());
---
<h1>Welcome, {data.name}</h1>
<p>Your latest activity: {data.activity}</p>

従来のSSR-onlyモードとの違い

output: 'server'（SSR-onlyモード）ではすべてのページがSSRされ、静的生成のメリット（高速配信、CDNキャッシュ）を活かせません。Hybrid Renderingでは、静的ページはビルド時に生成してCDNから配信し、動的ページのみサーバーで処理するため、以下のメリットがあります。

項目SSG-onlySSR-onlyHybrid Rendering
ビルド時間短いなし（ランタイム）中程度
初回表示速度最速（CDN配信）遅い（サーバー処理）ページにより最適化
動的コンテンツ不可可能ページ単位で可能
サーバー負荷なし高い動的ページのみ
Core Web Vitals優秀課題あり最適化可能

Hybrid Renderingの実装パターン

パターン1: ブログ + ユーザー認証

ブログ記事は静的生成、マイページは動的レンダリングという典型的なユースケースです。

---
// src/pages/blog/[slug].astro
export const prerender = true;

import { getEntry } from 'astro:content';

const { slug } = Astro.params;
const post = await getEntry('blog', slug);
---
<article>
  <h1>{post.data.title}</h1>
  <div set:html={post.body} />
</article>
---
// src/pages/my/profile.astro
export const prerender = false;

const token = Astro.cookies.get('auth_token');
if (!token) {
  return Astro.redirect('/login');
}

const profile = await fetch('https://api.example.com/profile', {
  headers: { Authorization: `Bearer ${token.value}` }
}).then(r => r.json());
---
<h1>{profile.name}</h1>
<p>Email: {profile.email}</p>

パターン2: 商品ページ + リアルタイム在庫

商品の基本情報は静的生成し、在庫状況だけAPIで取得する実装です。

---
// src/pages/products/[id].astro
export const prerender = true;

export async function getStaticPaths() {
  const products = await fetch('https://api.example.com/products').then(r => r.json());
  return products.map(p => ({ params: { id: p.id }, props: { product: p } }));
}

const { product } = Astro.props;
---
<h1>{product.name}</h1>
<p>{product.description}</p>
<div id="stock" hx-get={`/api/stock/${product.id}`} hx-trigger="load">
  Loading stock...
</div>
// src/pages/api/stock/[id].js
export const prerender = false;

export async function GET({ params }) {
  const stock = await fetch(`https://inventory.example.com/check/${params.id}`).then(r => r.json());
  return new Response(
    `<span>${stock.quantity > 0 ? `在庫あり（${stock.quantity}点）` : '在庫切れ'}</span>`,
    { headers: { 'Content-Type': 'text/html' } }
  );
}

パターン3: 多言語サイトでの部分的動的生成

主要言語は静的生成、マイナー言語はSSRで対応する戦略です。

// astro.config.mjs
export default defineConfig({
  output: 'hybrid',
  i18n: {
    defaultLocale: 'ja',
    locales: ['ja', 'en', 'zh'], // 事前生成する言語
    routing: {
      prefixDefaultLocale: false
    }
  }
});
---
// src/pages/[lang]/about.astro
const majorLocales = ['ja', 'en', 'zh'];
export const prerender = Astro.currentLocale && majorLocales.includes(Astro.currentLocale);

const content = await import(`../../content/${Astro.currentLocale}/about.md`);
---
<article set:html={content} />

デプロイ環境別の設定とパフォーマンス最適化

Vercel での設定

VercelではStatic PagesとServerless Functionsが自動的に分離されます。

// astro.config.mjs
import vercel from '@astrojs/vercel/serverless';

export default defineConfig({
  output: 'hybrid',
  adapter: vercel({
    functionPerRoute: false, // 1つの関数で複数ルートを処理（コールドスタート削減）
    edgeMiddleware: true, // Edge Middlewareを有効化
  }),
});

2026年3月のVercel v1.42アップデートにより、Astro Hybrid Renderingの自動最適化が追加されました。静的ページは自動的にEdge Networkにキャッシュされ、LCPが平均40%改善されたという公式レポートがあります。

Cloudflare Pages での設定

Cloudflare PagesではWorkersでSSRを処理します。

// astro.config.mjs
import cloudflare from '@astrojs/cloudflare';

export default defineConfig({
  output: 'hybrid',
  adapter: cloudflare({
    mode: 'directory', // ディレクトリモード（推奨）
    routes: {
      strategy: 'include', // SSRルートを明示的に指定
    }
  }),
});

Cloudflare Pagesの場合、静的アセットは自動的に200以上のエッジロケーションにキャッシュされ、SSRページはWorkers（制限なしプランで月$5）で処理されます。

Netlify での設定

NetlifyではEdge Functionsを使用します。

// astro.config.mjs
import netlify from '@astrojs/netlify';

export default defineConfig({
  output: 'hybrid',
  adapter: netlify({
    edgeFunctions: true, // Edge Functionsを有効化
  }),
});

2026年2月のNetlify更新で、Astro Hybrid Renderingのビルド時間が平均35%短縮されました。

レンダリングフロー図解

以下は、Hybrid Renderingでのリクエスト処理フローです。

flowchart TD
    A[ユーザーリクエスト] --> B{prerenderの設定}
    B -->|true| C[CDNから静的ページ配信]
    B -->|false| D[サーバーサイドでレンダリング]
    C --> E[HTML返却]
    D --> F[APIデータ取得]
    F --> G[動的HTML生成]
    G --> E
    E --> H[ブラウザ表示]

このフローにより、静的ページは高速配信され、動的ページのみサーバー負荷がかかる仕組みです。

Hybrid Renderingのベストプラクティス

1. prerenderのデフォルト値を明示する

大規模プロジェクトでは、デフォルトを静的にし、必要な箇所だけSSRにする設計が推奨されます。

// astro.config.mjs
export default defineConfig({
  output: 'hybrid',
  experimental: {
    globalRoutePriority: true, // ルート優先度を明確化（Astro 5.0新機能）
  }
});

2. APIルートの分離

SSRページとAPIルートを分離することで、キャッシュ戦略を柔軟に設定できます。

// src/pages/api/data.js
export const prerender = false;

export async function GET() {
  const data = await fetchFromDatabase();
  return new Response(JSON.stringify(data), {
    headers: {
      'Content-Type': 'application/json',
      'Cache-Control': 'public, max-age=60' // 60秒キャッシュ
    }
  });
}

3. ビルド時のエラーハンドリング

静的生成に失敗した場合のフォールバック設定が重要です。

---
// src/pages/blog/[slug].astro
export const prerender = true;

export async function getStaticPaths() {
  try {
    const posts = await fetch('https://api.example.com/posts').then(r => r.json());
    return posts.map(p => ({ params: { slug: p.slug }, props: { post: p } }));
  } catch (error) {
    console.error('Failed to fetch posts:', error);
    return []; // 空配列を返してビルドエラーを防ぐ
  }
}
---

4. 環境変数での動的制御

開発環境ではSSR、本番環境では静的生成という切り替えも可能です。

---
export const prerender = import.meta.env.PROD; // 本番環境のみ静的生成

const data = await fetch('https://api.example.com/data').then(r => r.json());
---

実運用での注意点とトラブルシューティング

ビルド時間の増加

静的生成するページが多い場合、ビルド時間が増加します。**Incremental Static Regeneration（ISR）**の導入を検討しましょう。

// astro.config.mjs（Vercelの場合）
import vercel from '@astrojs/vercel/serverless';

export default defineConfig({
  output: 'hybrid',
  adapter: vercel({
    isr: {
      expiration: 60 * 60 * 24, // 24時間ごとに再生成
    }
  })
});

SSRページのコールドスタート問題

サーバーレス関数のコールドスタートを最小化するため、関数の統合とEdge Functionsの活用が有効です。

// astro.config.mjs
export default defineConfig({
  adapter: vercel({
    functionPerRoute: false, // 複数ルートを1つの関数にまとめる
    edgeMiddleware: true, // Edge Middlewareでウォームアップ
  })
});

キャッシュ戦略の設計

CDNキャッシュと動的コンテンツのバランスを取るため、stale-while-revalidateパターンが推奨されます。

// src/pages/api/news.js
export const prerender = false;

export async function GET() {
  const news = await fetchNews();
  return new Response(JSON.stringify(news), {
    headers: {
      'Cache-Control': 's-maxage=60, stale-while-revalidate=300'
      // 60秒キャッシュ、300秒間はstaleなコンテンツを返しつつ裏で更新
    }
  });
}

まとめ

Astro 5.0のHybrid Renderingは、以下の要件を満たすプロジェクトに最適です。

  • 静的コンテンツと動的コンテンツが混在するサイト（ブログ+ダッシュボード、ECサイト+在庫管理など）
  • Core Web Vitalsを最適化しながら動的機能を提供したい
  • サーバーコストを最小化しつつ、必要な箇所だけSSRを使いたい
  • 段階的な移行が必要（既存SSGサイトに動的機能を追加）

主なポイント:

  • output: 'hybrid'で有効化し、prerenderでページごとに制御
  • VercelやCloudflare Pagesで自動最適化が利用可能
  • 静的ページはCDN配信、動的ページのみサーバー処理でパフォーマンスとコストを両立
  • ISRやstale-while-revalidateでキャッシュ戦略を最適化
  • 2026年1月のAstro 5.0で正式版となり、本番環境での採用実績が急増中

Hybrid Renderingを活用することで、従来は別々のプロジェクトで管理していた静的サイトと動的アプリを統合でき、開発効率とユーザー体験の両方を向上できます。

参考リンク

#Astro #Hybrid Rendering #SSG #SSR #パフォーマンス最適化
シェア:

関連記事

Web制作

Astro Prerenderで動的ルートを完全静的化する方法｜SSG+動的パスでSEO最大化【2026年4月最新】

Web制作

Astro Hybrid Rendering vs SSR どっちを選ぶ【パフォーマンス比較】

Web制作

Next.js 15 Server Actions のエラーハンドリング実装｜フォームバリデーション・非同期処理の正解【2026年最新】

← 記事一覧に戻る