このページとあなたの好きなAIアシスタントを使ってドキュメントを要約します
このページのコンテンツはAIを使用して翻訳されました。
英語の元のコンテンツの最新バージョンを見るこのドキュメントを改善するアイデアがある場合は、GitHubでプルリクエストを送信することで自由に貢献してください。
ドキュメントへのGitHubリンクドキュメントのMarkdownをクリップボードにコピー
import PackageManagerTabs from '/components/tabs/PackageManagerTabs.astro';
import { Steps } from '@astrojs/starlight/components';
import RecipeLinks from '/components/RecipeLinks.astro';
import IntegrationsNav from '/components/IntegrationsNav.astro';
import ReadMore from '/components/ReadMore.astro';
Astroプロジェクトのコードはウェブに表示するためにHTMLとしてレンダリングされる必要があります。
デフォルトでは、Astroのページ、ルート、APIエンドポイントはビルド時に静的ページとして事前レンダリングされます。しかし、リクエストがあったときにサーバーで一部またはすべてのルートをオンデマンドレンダリングすることもできます。
オンデマンドレンダリングされたページやルートはアクセスごとに生成され、ユーザーごとにカスタマイズできます。たとえば、オンデマンドレンダリングされたページでログインユーザーのアカウント情報を表示したり、サイト全体を再ビルドせずに最新データを取得して表示したりできます。
リクエスト時にサーバーで行うオンデマンドレンダリングは**サーバーサイドレンダリング(SSR)**とも呼ばれます。
サーバーアダプター
任意のページをオンデマンドレンダリングするにはアダプターを追加します。アダプターは、Astroが特定のランタイム(NetlifyやCloudflareなど)上でプロジェクトを実行するスクリプトを出力できるようにします。ランタイムはリクエスト時にページを生成するサーバー環境です。
サイトが完全に静的でオンデマンドレンダリングを行わない場合でも、アダプターを追加する価値があります。たとえばNetlifyアダプターはNetlifyのImageCDNを有効にし、サーバーアイランドでserver:deferを使うにはアダプターのインストールが必須です。
Astro公式アダプターはNode.js、Netlify、Vercel、Cloudflare用が提供されています。公式およびコミュニティ製のアダプター一覧から、デプロイ環境に合ったものを選んでください。
アダプターを追加する
Astroが保守する公式アダプターは、以下のastro addコマンドで追加できます。このコマンドはアダプターのインストールとastro.config.mjsへの設定変更を一度に行います。
例としてNetlifyアダプターをインストールする場合は、次のコマンドを実行します。
アダプターを手動で追加し、astro.config.mjsを自分で更新することもできます(例:@astrojs/netlify)。
アダプターによっては独自の設定が必要な場合があります。各アダプターのドキュメントを確認し、必要な設定をastro.config.mjsに追加してください。
オンデマンドレンダリングを有効にする
デフォルトではサイト全体が事前レンダリングされ、静的HTMLがブラウザに送信されます。たとえば、クッキーをチェックしてパーソナライズしたコンテンツを表示するページなど、サーバーレンダリングが必要なルートだけ事前レンダリングを無効化できます。
まず、オンデマンドレンダリングを有効にするためにアダプターを追加します。
次に、オンデマンドレンダリングしたいページやエンドポイントの先頭にexport const prerender = falseを追加します。その他のページは静的サイトのままです。
コードをクリップボードにコピー
---export const prerender = false---<html><!--このコンテンツはリクエスト時にサーバーレンダリングされます！サーバーランタイム用アダプターを追加するだけ！他のページはビルド時に静的生成されます！--><html>以下は、事前レンダリングを無効にして、毎回ランダムな数値を返すエンドポイントの例です。
コードをクリップボードにコピー
export const prerender = false;export async function GET() { const number = Math.random(); return new Response( JSON.stringify({ number, message: `ランダムな数字はこちら:${number}`, }), );}'server'モード
動的なアプリの場合は、アダプターを追加したあとビルド出力をoutput: 'server'に設定すると、すべてのページがデフォルトでサーバーサイドレンダリングされます。これは、各ページで事前レンダリングをオフにするのと同じ効果です。
そのうえで、プライバシーポリシーや会社概要ページなど、サーバーを介さずともよいページだけを個別に事前レンダリングできます。
コードをクリップボードにコピー
---export const prerender = true---<html><!--`output: 'server'`を設定していますが、このページは静的です！他のページはオンデマンドレンダリングです！--><html>ページやルートを静的生成したい場合はexport const prerender = trueを追加します。
コードをクリップボードにコピー
export const prerender = true;export async function GET() { return new Response( JSON.stringify({ message: `これは静的エンドポイントです`, }), );}:::tip まずはデフォルトの'static'モードで開始し、ほとんどのページ、または全ページをオンデマンドレンダリングしたいと確信できるまでモードを切り替えないことを推奨します。これにより、静的コンテンツをレンダリングするだけでサーバー関数を呼び出す必要がなくなり、パフォーマンスを最大限に引き出せます。
'server'モードは新しい機能を追加するものではなく、レンダリング方式のデフォルトを切り替えるだけです。 :::
設定リファレンスのoutput設定を参照してください。
オンデマンドレンダリングの機能
HTMLストリーミング
HTMLストリーミングでは、ドキュメントをチャンクごとに分割し、順に送信して描画します。Astroはオンデマンドレンダリング時にコンポーネント単位でストリーミングを行い、描画済みの部分をすぐにユーザーへ表示します。これによりHTMLを可能な限り速く表示できますが、大きなドキュメントの場合はネットワーク状況によってダウンロードが遅くなったり、データ取得待ちで描画がブロックされることがあります。
<RecipeLinks slugs={["ja/recipes/streaming-improve-page-performance"]} />
:::caution Responseヘッダーを変更する機能はページレベルでのみ利用できます。コンポーネント(レイアウトを含む)内部では使用できません。コンポーネントコードが実行される時点ではResponseヘッダーはすでに送信されているため、変更できないからです。 :::
クッキー
オンデマンドレンダリングされたページやAPIエンドポイントでは、クッキーの確認・設定・取得・削除ができます。
以下の例はページビューのカウンターとしてクッキー値を更新しています。
コードをクリップボードにコピー
---export const prerender = false; // 'server'モードでは不要let counter = 0if (Astro.cookies.has('counter')) { const cookie = Astro.cookies.get('counter') const value = cookie?.number() if (value !== undefined && !isNaN(value)) counter = value + 1}Astro.cookies.set('counter', String(counter))---<html> <h1>Counter = {counter}</h1></html>Astro.cookiesとAstroCookie型についてはAPIリファレンスを参照してください。
Response
Astro.responseは標準のResponseInitオブジェクトで、ステータスやヘッダーを設定できます。
次の例は商品が存在しない場合にステータスを設定しています。
コードをクリップボードにコピー
---export const prerender = false; // 'server'モードでは不要import { getProduct } from '../api';const product = await getProduct(Astro.params.id);// 商品が存在しないif (!product) { Astro.response.status = 404; Astro.response.statusText = 'Not found';}---<html> <!-- ページ内容 --></html>Astro.response.headers
Astro.response.headersでヘッダーを設定できます。
コードをクリップボードにコピー
---export const prerender = false; // 'server'モードでは不要Astro.response.headers.set('Cache-Control', 'public, max-age=3600');---<html> <!-- ページ内容 --></html>Responseオブジェクトを返す
オンデマンドレンダリングを使用するページでは、Responseオブジェクトを直接返すこともできます。手動で返すか、Astro.redirectを使用します。
コードをクリップボードにコピー
---export const prerender = false; // 'server'モードでは不要import { getProduct } from '../api';const product = await getProduct(Astro.params.id);// 商品が存在しないif (!product) { return new Response(null, { status: 404, statusText: 'Not found' });}// 販売終了if (!product.isAvailable) { return Astro.redirect("/products", 301);}---<html> <!-- ページ内容 --></html>Request
Astro.requestは標準のRequestオブジェクトで、url、headers、method、ボディなどを取得できます。静的生成されないページで追加情報を取得する際に利用します。
Astro.request.headers
リクエストヘッダーはAstro.request.headersで取得します。これはブラウザのRequest.headersと同じくHeadersオブジェクトです。
コードをクリップボードにコピー
---export const prerender = false; // 'server'モードでは不要const cookie = Astro.request.headers.get('cookie');// ...---<html> <!-- ページ内容 --></html>Astro.request.method
HTTPメソッドはAstro.request.methodで取得できます。ブラウザのRequest.methodと同様で、文字列で返されます。
コードをクリップボードにコピー
---export const prerender = false; // 'server'モードでは不要console.log(Astro.request.method) // ブラウザ遷移時はGET---Astro.requestについて詳しくはAPIリファレンスを参照してください。
サーバーエンドポイント
サーバーエンドポイント(APIルートとも呼ばれます)は、src/pages/フォルダー内の.jsまたは.tsファイルからエクスポートされる特殊な関数です。オンデマンドのサーバーサイドレンダリングにおける強力な機能で、安全にサーバー上でコードを実行できます。
この関数はエンドポイントコンテキストを受け取り、Responseを返します。
詳しくはEndpointsガイドを参照してください。