オンデマンドレンダリングアダプター
Astroでは、一部あるいはすべてのページとエンドポイントにオンデマンドレンダリングを選択できます。これはサーバーサイドレンダリング(SSR) とも呼ばれ、リクエスト時にサーバー上でHTMLページを生成し、結果をクライアントに送信します。プロジェクトをサーバー上で実行しリクエストを処理するためには、アダプターが使用されます。
このオンデマンドレンダリングを利用すると、次のようなことが可能になります。
- アプリのログイン状態のためにセッションを実装する。
fetch()
を使って動的にAPIを呼び出しデータをレンダリングする。- アダプターを利用してサイトをホストにデプロイする。
以下が必要な場合は、Astroプロジェクトでオンデマンドレンダリングを有効にすることを検討してください。
-
APIエンドポイント: クライアントから機密データを隠したまま、データベースへのアクセス、認証、認可などのタスクをおこなうAPIエンドポイントとして機能するページを作成する。
-
ページの保護: サーバーでユーザーアクセスを制御し、ユーザーの権限に基づいてページへのアクセスを制限する。
-
頻繁に変更されるコンテンツ: サイトを静的に再ビルドすることなく個々のページを生成する。これはページのコンテンツが頻繁に更新される場合に有効。
公式アダプター
セクションタイトル: 公式アダプターAstroは、Node.js、Vercel、Netlify、Cloudflareの公式アダプターを提供しています。
(Deno、SST、AWSなどの)コミュニティ製のアダプターを、インテグレーションディレクトリで確認してください。
SSRアダプター
オンデマンドサーバーレンダリングを有効にする
セクションタイトル: オンデマンドサーバーレンダリングを有効にするAstroのオンデマンドレンダリングの出力モード(server
とhybrid
)はいずれも、可能な限り個々のルートを事前レンダリングすることで、静的サイトのパフォーマンスを活かせるようにします。このことは、完全に動的なアプリケーションであっても、特定のルートのみにオンデマンドレンダリングが必要なほぼ静的なサイトであっても同様です。
プロジェクトでどちらを使用するかを決定するには、ページとルートの多くがどのようにレンダリングされるかに応じてoutput
オプションを選択します。
output: 'server'
: デフォルトでオンデマンドレンダリングされます。サイトやアプリの大部分またはすべてをリクエスト時にサーバーレンダリングする場合に使用します。個別のページやエンドポイントで、事前レンダリングにオプトインできます。output: 'hybrid'
: デフォルトでHTMLに事前レンダリングされます。サイトの大部分が静的である場合に使用します。個別のページやエンドポイントで、事前レンダリングをオプトアウトできます。
サーバーは少なくともいくつかのページをオンデマンドに生成する必要があるため、どちらのモードを選択しても、サーバー機能を実行するためにアダプターを追加する必要があります。
アダプターの追加
セクションタイトル: アダプターの追加プロジェクトをserver
またはhybrid
モードでデプロイするには、アダプターを追加する必要があります。これは、どちらのモードも、リクエスト時にページを生成するためにサーバーでコードを実行する環境であるランタイムが必要であるためです。各アダプターによってAstroは、VercelやNetlify、Cloudflareなどの特定のランタイムでプロジェクトを実行するためのスクリプトを出力できるようになります。
公式版とコミュニティ版のアダプターを、インテグレーションディレクトリで確認できます。自分のデプロイ環境に対応するものを選択してください。
astro add
を使ったインストール
セクションタイトル: astro addを使ったインストールAstroが管理する公式のアダプターは、次のastro add
コマンドを使って追加できます。これにより、アダプターのインストールと、astro.config.mjs
ファイルへの適切な変更が一度に実行されます。
たとえばVercelアダプターをインストールするには、以下のコマンドを実行します。
手動インストール
セクションタイトル: 手動インストールパッケージのインストールとastro.config.mjs
の更新を手動でおこない、アダプターを追加することもできます。
たとえば、Vercelアダプターを手動で追加するには以下のようにします。
-
好みのパッケージマネージャーを利用してプロジェクトの依存関係にアダプターをインストールします。
-
astro.config.mjs
ファイルのimportとdefault exportにアダプターを追加し、必要なoutput
モードを設定します。アダプターごとに設定が異なることに注意してください。各アダプターのドキュメントを読み、選択したアダプターに必要な設定オプションを
astro.config.mjs
で適用してください。
server
とhybrid
の設定
セクションタイトル: serverとhybridの設定オンデマンドレンダリングを有効化するには、output
の設定値を2つのサーバーレンダリングモードのいずれかに更新する必要があります。
たとえば、デフォルトですべてのページがオンデマンドにレンダリングされるような、大部分が動的なアプリケーションを設定するには、Astroの設定ファイルにoutput: 'server'
を追加します。
server
モードで事前レンダリングにオプトインする
セクションタイトル: serverモードで事前レンダリングにオプトインするoutput: server
を設定したほぼサーバーレンダリングされるアプリについては、export const prerender = true
をページまたはルートに追加して、静的なページまたはエンドポイントを事前レンダリングできます。
hybrid
モードで事前レンダリングをオプトアウトする
セクションタイトル: hybridモードで事前レンダリングをオプトアウトするoutput: hybrid
を設定したほぼ静的なサイトについては、オンデマンドにサーバーレンダリングしたいファイルにexport const prerender = false
を追加します。
オンデマンドレンダリングの機能
セクションタイトル: オンデマンドレンダリングの機能HTMLストリーミング
セクションタイトル: HTMLストリーミングHTMLストリーミングにより、ドキュメントはチャンクへと分割され、ネットワークを経由して順に送信され、その順番でページにレンダリングされます。server
またはhybrid
モードでは、Astroはコンポーネントをレンダリングする際にブラウザに送信するためにHTMLストリーミングを使用します。これによりユーザーにできるだけ早くHTMLを表示できますが、ネットワークの状況によっては、大きなドキュメントのダウンロードが遅れたり、データの取得を待つことでページのレンダリングがブロックされることがあります。
レスポンスヘッダーを変更する機能はページレベルでのみ利用できます。(レイアウトコンポーネントを含むコンポーネントの内部では使用できません。)Astroがコンポーネントのコードを実行する時点で、すでにレスポンスヘッダーが送信されてしまっており、それを変更できないためです。
クッキー
セクションタイトル: クッキーserver
とhybrid
モードでは、ページやAPIエンドポイントでクッキーをチェック、設定、取得、削除できます。
以下の例では、ページビューカウンターのクッキーの値を更新しています。
Astro.cookies
とAstroCookie
型の詳細については、APIリファレンスを参照してください。
Response
セクションタイトル: Responseオンデマンドレンダリングにより、ページからResponseを返すこともできます。
以下の例では、データベースでidを検索した後、動的に404を返しています。
Request
セクションタイトル: RequestAstro.request
は標準のRequestオブジェクトです。リクエストのurl
、headers
、method
、さらにはbody
を取得するなどのために使用できます。
server
とhybrid
モードの両方で、静的に生成されないページに関する追加の情報にこのオブジェクトからアクセスできます。
Astro.request.headers
セクションタイトル: Astro.request.headersリクエストのヘッダーにはAstro.request.headers
からアクセスできます。これはブラウザのRequest.headers
と同様に動作します。これはHeadersオブジェクトで、クッキーなどのヘッダーを取得できます。
Astro.request.method
セクションタイトル: Astro.request.methodリクエストで使用されているHTTPメソッドにはAstro.request.method
からアクセスできます。これはブラウザのRequest.method
と同様に動作します。リクエストで使用されているHTTPメソッドを文字列として返します。
Astro.request
の詳細については、APIリファレンスを参照してください。
サーバーエンドポイント
セクションタイトル: サーバーエンドポイントAPIルートとも呼ばれるサーバーエンドポイントは、src/pages
フォルダの中の.js
または.ts
ファイルからエクスポートされる特別な関数です。オンデマンドのサーバーサイドレンダリングにおける強力な機能であるAPIルートは、サーバーサイドで安全にコードを実行できます。
この関数はエンドポイントコンテキストを受け取り、Responseを返します。
詳しくは、エンドポイントガイドを参照してください。
Learn