目次
Astroとは
Astroは、「より少ないJavaScriptで、より速いウェブサイトを構築する」ことを目指すモダンなウェブフレームワークです。基本は静的サイトジェネレーター(SSG)として動作し、ビルド時に軽量なHTMLを生成することで高速表示を実現します。ReactやVueなどの人気UIフレームワークも利用可能で、SSRやハイブリッドレンダリングにも対応する柔軟性も持ち合わせています。
Astroについて、その特長や基本的な使い方はこちらの記事で詳しく解説しています。
2025-05-01T00:48:39Z
高速な静的サイト構築の新定番！Astro (SSG) の特長・比較・使い方
SSGとSSRの違い
AstroでWebページをレンダリングする際には、主にSSG（Static Site Generation）とSSR（Server Side Rendering）という2つの方式、またはそれらを組み合わせたハイブリッド方式が用いられます。
SSGとは
SSGは、Webサイトのビルド時にすべてのページをHTMLファイルとして事前に生成する方式です。生成されたHTMLファイルはCDN（コンテンツデリバリネットワーク）などに配置され、ユーザーからのリクエスト時には既に完成しているHTMLを返すだけなので、非常に高速な表示が可能です。ブログ記事や製品紹介ページなど、コンテンツの更新頻度が低い静的なページに適しています。
SSRとは
SSRは、ユーザーからのリクエストがあるたびに、サーバー側でHTMLを動的に生成して返す方式です。データベースの情報に基づいてパーソナライズされたコンテンツを表示したり、常に最新の情報を反映させたいページ（ユーザーダッシュボード、ECサイトの在庫表示など）に適しています。SSGに比べるとサーバー側の処理が必要になるため、レスポンス速度は若干遅くなる可能性がありますが、動的なコンテンツをリアルタイムで提供できるメリットがあります。
Astro SSRの３つのメリット
アイランドアーキテクチャで高速化できる SSR
Astro独自の アイランドアーキテクチャ がSSRでも強みを発揮します。従来のSSRではページ全体のJavaScriptが送られがちでしたが、Astroでは インタラクティブな部品（アイランド）のJavaScriptのみを送信します。ページの大部分はJavaScriptなしで高速に表示され、必要な部分だけが動作します。これにより、SSRの動的さと高速表示を両立することができます。クライアントの負荷を最小限に抑えつつ、リッチな体験を提供できるのが大きな利点です。
ページごとにSSG/SSRを使い分ける柔軟性
Astroでは、サイト全体をSSRにするだけでなく、ページ単位でSSGかSSRかを選べる「ハイブリッドモード」 が利用可能です。例えば、ブログ記事はSSGで高速化し、ユーザー専用ページはSSRで動的に生成する、といった使い分けができます。ページの特性に合わせて最適なレンダリング方法を選ぶことで、サイト全体のパフォーマンスと機能性を最大化できます。
アダプターによる様々な実行環境への対応
Astroは、さまざまなデプロイ環境（Node.js、Vercel、Netlify、Cloudflareサーバーなど）に対応するためのアダプターシステムを提供しています。アダプターを利用することで、SSRアプリケーションを特定のホスティングプラットフォームや実行環境に最適化された形で簡単にビルド・デプロイできます。環境ごとの細かな設定を意識することなく、スムーズなSSR導入が可能です。
導入手順
SSRモードの有効化
プロジェクトルートにある astro.config.mjs ファイルを編集し、SSRモードを有効にします。
// src/astro.config.mjs
import { defineConfig } from 'astro/config';
export default defineConfig({
output: 'server'
});
アダプターの追加
Node.js の場合
@astrojs/nodeを追加します。
npm install @astrojs/node
astro.config.mjs の編集
import { defineConfig } from 'astro/config';
import node from '@astrojs/node';
export default defineConfig({
output: 'server',
adapter: node({
mode: 'standalone',
}),
});
追加したアダプターを import し、export default defineConfig 内で指定します。mode: ‘middleware’ | ‘standalone’
middlewareモードでは、ビルドされた出力を Express.js や Fastify などの別の Node.js サーバーのミドルウェアとして使用できるようになります。
standaloneモードは、エントリモジュールの実行時に自動的に起動するサーバーを構築します。これにより、追加のコードを必要とせずに、ビルドをホストに簡単にデプロイできます。
特に理由がないかぎり、standaloneモードにしましょう。
Vercel の場合
npm install @astrojs/vercel
astro.config.mjs の編集
import { defineConfig } from 'astro/config';
import vercel from '@astrojs/vercel';
export default defineConfig({
output: 'server',
adapter: vercel()
});
カスタムAPIエンドポイント
APIエンドポイントとは
APIエンドポイントとは、HTMLページではなく、JSON、テキスト、その他のデータを返す特別なルートです。Astroでは通常、src/pages/ ディレクトリ内に配置され、ファイル名に基づいてルーティングされます。
APIエンドポイントの作成方法
src/pages/ ディレクトリ内（またはそのサブディレクトリ）に、 .js または .ts 拡張子を持つファイルを作成します。 src/pages/api/ ディレクトリ以下に配置することが一般的です。
ここでは src/pages/api/hello.ts というファイルを作成し、以下の内容を記述します。
// src/pages/api/hello.ts
import type { APIRoute } from 'astro';
export const GET: APIRoute = ({ request }) => {
// URLオブジェクトを取得してクエリパラメータなどを扱える
const url = new URL(request.url);
const name = url.searchParams.get('name') || 'World';
// JSONデータを返すResponseオブジェクトを作成
return new Response(
JSON.stringify({ message: `Hello, ${name}!` }),
{
status: 200, // HTTPステータスコード
headers: {
'Content-Type': 'application/json' // コンテンツタイプをJSONに設定
}
}
);
}
new Response() を使用してレスポンスを構築します。第一引数にレスポンスボディ（ここではJSON文字列）、第二引数にオプション（ステータスコード、ヘッダーなど）を指定します。
このエンドポイントには、開発サーバー実行中に /api/hello や /api/hello?name=Astro のようなURLでアクセスできます。
SSR ページの作成
作成したAPIを使用するSSRページを作成します。
ここでは src/pages/show-greeting.astro というファイル名で以下の内容を作成します。
---
// src/pages/show-greeting.astro
// このコードはサーバーサイドで実行されます
let greetingMessage = 'APIからデータを取得できませんでした。'; // デフォルト/エラー時のメッセージ
let rawData: Record<string, any> | null = null; // 生データ表示用
try {
// APIエンドポイントのURLを構築
// Astro.url.origin を使うと、開発/本番環境を問わず正しいURLを生成できる
// クエリパラメータを追加してAPIに渡す例
const apiUrl = new URL('/api/hello?name=SSRページ', Astro.url.origin);
// サーバーサイドで自身のAPIエンドポイントをfetchする
const response = await fetch(apiUrl);
if (response.ok) {
// レスポンスが正常ならJSONをパース
const data = await response.json();
rawData = data; // 生データを保持
// APIからのメッセージをページに表示する変数に代入
greetingMessage = data.message || 'APIからのメッセージが空です。';
} else {
// APIがエラーを返した場合
greetingMessage = `APIエラーが発生しました: ${response.status} ${response.statusText}`;
console.error(`API Error: ${response.status} ${await response.text()}`);
}
} catch (error) {
// fetch自体が失敗した場合 (ネットワークエラーなど)
greetingMessage = 'APIへの接続中にエラーが発生しました。';
if (error instanceof Error) {
console.error('Fetch Error:', error.message);
} else {
console.error('Unknown Fetch Error:', error);
}
}
// フロントマターで取得したデータ (greetingMessage, rawData) は、
// 下のHTMLテンプレート部分で使用できる
---
<html lang='ja'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>APIデータ表示 (SSR)</title>
</head>
<body>
<div class='container'>
<h1>Astro SSRページからAPIを呼び出すデモ</h1>
<p>このページはサーバーでレンダリングされる際に、<code>/api/hello?name=SSRページ</code> エンドポイントを呼び出しています。</p>
<div class='greeting-box'>
<strong>APIからのメッセージ:</strong> {greetingMessage}
</div>
{rawData && (
<div>
<h2>取得した生データ:</h2>
<pre>{JSON.stringify(rawData, null, 2)}</pre>
</div>
)}
<p><a href='/'>トップページに戻る</a></p>
</div>
</body>
</html>
動作チェック
ターミナルでAstroプロジェクトのルートディレクトリに移動し、以下のコマンドを実行して開発サーバーを起動します。
npm run dev
# または yarn dev, pnpm dev
開発サーバーが起動したら、ターミナルに表示されるローカルアドレスに続けて、作成したページのパス（ http://localhost:4321/show-greeting ）をブラウザのアドレスバーに入力してアクセスします。
表示内容の確認
- ページに「Astro SSRページからAPIを呼び出すデモ」という見出しが表示されているか。
greetingMessage変数に格納されたAPIからのメッセージ（例: APIからのメッセージ: Hello, SSRページ!）が正しく表示されているか。- 「取得した生データ:」セクションに、APIから返されたJSONデータ（例:
{ 'message': 'Hello, SSRページ!' }）が表示されているか。
これらが表示されていれば、サーバーサイドでのAPI呼び出しとデータ埋め込みが成功しています。
まとめ
この記事では、Astro SSRのメリットや導入手順を解説してきました。
Astro SSRを使用することでブログやドキュメントサイトのようなコンテンツ中心のサイトから、認証や動的データを扱うより複雑なWebアプリケーションまで、幅広いプロジェクトの要件に応えることができる、非常にパワフルで柔軟なフレームワークとなっています。
ぜひ、AstroのAPIエンドポイントとSSR機能を活用して、次世代のWeb体験を構築してみてください。
- 記事のURLをコピーしました
-
