コンテンツにスキップ

レンダリングモード

Astroプロジェクトのコードをウェブ上に表示するには、HTMLへとレンダリングする必要があります。

Astroのページ、ルート、APIエンドポイントは、ビルド時に事前レンダリングすることも、ルートがリクエストされたときにサーバーでオンデマンドにレンダリングすることもできます。Astroアイランドにより、必要に応じてクライアントサイドレンダリングも含められます。

Astroでは、処理の多くがブラウザではなくサーバーでおこなわれます。そのため、それほどパワフルでないデバイスやインターネット接続が遅い環境でサイトやアプリを表示したときに、クライアントサイドレンダリングよりも高速になります。サーバーでレンダリングされたHTMLは、高速でSEOにも優れており、デフォルトでアクセシブルです。

ページをレンダリングする方法は、outputで設定できます。

デフォルトのレンダリングモードは output: 'static' です。これはビルド時にすべてのページルートのHTMLを作成します。

このモードでは、サイト全体が事前レンダリングされ、サーバーはすべてのページを事前にビルドしてブラウザに送信できるようにします。すべてのサイト訪問者に同じHTMLドキュメントが送信され、ページの内容を更新するにはサイト全体を再ビルドする必要があります。この方法は、静的サイト生成(Static Site Generation、SSG) としても知られています。

すべてのAstroプロジェクトはデフォルトで、最も軽量なブラウザ体験を提供するために、ビルド時に事前レンダリング(静的生成)するように設定されています。リクエストに応じてサーバーがページを生成する必要がないため、ブラウザがHTMLのビルドを待つ必要もありません。サイトはバックエンドのデータソースのパフォーマンスには依存せず、一度ビルドしてしまえば、サーバーが機能している限りは静的サイトとしてアクセス可能なままとなります。

静的サイトでは、インタラクティブなUIコンポーネントを使うために(あるいはクライアントサイドでレンダリングされるアプリ全体を埋め込むために!)、好みのUIフレームワークで作成したAstroアイランドを、静的に事前レンダリングされたページ内に含められます。

ページナビゲーションをまたいだアニメーションや状態の永続化のために、AstroのビュートランジションAPIstaticモードでも利用できます。静的サイトでミドルウェアを使用して、リクエストに対するレスポンスデータをインターセプトして変換することもできます。

Astroの他の2つの出力モードにより、ページ、ルート、またはAPIエンドポイントの一部またはすべてをオンデマンドに都度レンダリングするよう設定できます。

  • output: 'server' は、多くのルートがオンデマンドであるような、高度に動的なサイトに適しています。
  • output: 'hybrid' は、一部のルートがオンデマンドであるような、ほぼ静的なサイトに適しています。

これらのルートはアクセスごとに生成されるため、各ユーザーに合わせてカスタマイズできます。たとえば、オンデマンドにレンダリングされたページは、ログインしたユーザーにアカウント情報を表示したり、サイト全体を再ビルドすることなく最新のデータを表示したりできます。リクエスト時のサーバーでのオンデマンドレンダリングは、サーバーサイドレンダリング(SSR) とも呼ばれています。

以下が必要な場合は、Astroプロジェクトでserverまたはhybridモードを有効にすることを検討してください。

  • APIエンドポイント: 秘匿データをクライアントから隠蔽したまま、データベースアクセス、認証、認可などのタスクのために特定のページをAPIエンドポイントとして機能させます。

  • 保護されたページ: サーバーでユーザーアクセスを処理し、ユーザーの権限に基づいてページへのアクセスを制限します。

  • 頻繁に変更されるコンテンツ: サイトを静的に再ビルドすることなく個々のページを生成します。これは、ページのコンテンツが頻繁に更新される場合に便利です。たとえば、fetch()により動的に呼び出されるAPIから取得したデータを表示する場合などです。

serverhybridいずれの出力モードにおいても、インタラクティブ性のために(あるいはクライアントサイドでレンダリングされるアプリ全体を埋め込むために!)、好みのUIフレームワークで作成したAstroアイランドを使用できます。アニメーションやルート間のナビゲーションをまたいだ状態の保持のためにミドルウェアやAstroのビュートランジションAPIを使えば、高度にインタラクティブなアプリも作成できます。