LESSON 10 · 約28分
静的生成とオンデマンド描画を選ぶ
いつHTMLを作るかを決め、実行環境に合ったadapterを使います。
コードを試す前に
02の基本構成から分けた発展実験です。Node adapterの導入と本番サーバーの起動が必要です。
各コードは独立した学習用の例で、すべてを順に一つのプロジェクトへ上書きする形式ではありません。同じレッスン内の対応ファイルは組み合わせます。依存関係・入力ファイル・実行条件は各noteに記載します。
開発環境の準備を確認する →このレッスンでわかること
- 静的とオンデマンドをデータの鮮度から選べる
- adapterとoutput設定の役割を説明できる
静的生成はビルド時に用意する
Astroの既定は静的生成です。HTMLなどを先に作って配信するため、記事や会社紹介をシンプルに公開できます。frontmatterで現在時刻を作っても、訪問のたびに更新される時計にはなりません。内容の更新は再ビルドや配信の更新と結び付けます。
オンデマンドはリクエストを受けて作る
ログイン中の本人の情報や、アクセス時の最新情報が必要なら、サーバーでリクエスト時に描画する方法を検討します。対象のページやendpointにexport const prerender = falseを置きます。その実行にはNodeやCloudflareなど公開先のランタイムに合うadapterが必要です。
outputは既定動作を切り替える
output: "server"にすると、ページの既定がオンデマンドになります。その中でもprerender = trueで特定ページを事前生成できます。serverモードだけがサーバー機能を利用できるわけではなく、静的既定の構成でもadapterを足して必要なルートだけオンデマンドにできます。古いoutput: "hybrid"を新規例へ混ぜません。
新鮮さ・安全性・待ち時間を一緒に考える
オンデマンドは毎回すべての取得が必ず最新になる魔法ではありません。元データや配信側のキャッシュを確認します。個人向け情報を共有キャッシュへ混ぜず、失敗やデータなしの表示も設計します。静的ホスティングへdistを置くだけでは、POST処理やActionsのサーバーは動きません。
Node用adapterを設定する
import { defineConfig } from 'astro/config';
import node from '@astrojs/node';
export default defineConfig({
adapter: node({ mode: 'standalone' }),
});別の練習構成でnpm install @astrojs/nodeを実行してから設定します。既定の静的生成を維持します。React等を導入済みなら既存のintegrations設定を消さず追加します。
このページだけリクエスト時に作る
---
export const prerender = false;
const generatedAt = new Date().toISOString();
---
<h1>生成時刻の観察</h1>
<p>{generatedAt}</p>同レッスンのadapterが必要です。外部キャッシュを設定しないローカル実験で、静的版との違いを比べます。リアルタイムに動く時計ではありません。
TRY IT YOURSELF
本番出力で生成時刻を比べる
- adapterなしの静的版をbuildして時刻の固定を確認する
- 別構成でadapterとprerender = falseを加えてbuildする
- Node standaloneではnode ./dist/server/entry.mjsで起動して再読み込みを比較する
できたらOK：静的とリクエスト時の違いをdevだけで判断しない
QUICK CHECK
理解を確かめよう
公式資料でもう少し詳しく
ここまで読めたら、ひとつ前進。