サーバーサイドレンダリング
Astroではサーバーサイドレンダリング(別名:SSR)が利用できます。SSRを有効にすると、次のようなことができます。
- アプリのログイン状態のためにセッションを実装する。
fetch
を使って動的にAPIを呼び出しデータを表示する。- アダプターを利用してサイトをホストにデプロイする。
プロジェクトでSSRを有効にする
Section titled プロジェクトでSSRを有効にするまずは設定オプションoutput: server
を使って開発モードでのSSRを有効にします。
import { defineConfig } from 'astro/config';
export default defineConfig({
output: 'server'
});
アダプターの追加
Section titled アダプターの追加SSRを有効にしたプロジェクトをデプロイするには、アダプターを追加する必要があります。SSRはサーバーサイドのコードを実行する環境であるサーバーランタイムが必要なためです。各アダプターによって、Astroは特定のランタイムでプロジェクトを実行するスクリプトを出力できます。
現在、次に示すアダプターが利用でき、今後追加されていきます。
astro add
を使ったインストール
Section titled astro addを使ったインストール公式のアダプターはastro add
コマンドを使って追加できます。アダプターのインストールとastro.config.mjs
ファイルへの適切な変更が一度に行われます。例えば、Netlifyアダプターをインストールするには次のコマンドを実行します。
npx astro add netlify
pnpm astro add netlify
yarn astro add netlify
手動でインストール
Section titled 手動でインストールパッケージをインストールし、astro.config.mjs
を更新して手動でアダプターを追加することもできます。(SSRを有効にするために必要な2つの手順については上記のリンクをご覧ください)my-adapter
をプレースホルダーの例として、次のような手順になります。
-
好みのパッケージマネージャーを利用してプロジェクトの依存関係にアダプターをインストールします。
Terminal window npm install @astrojs/my-adapter
Terminal window pnpm install @astrojs/my-adapter
Terminal window yarn add @astrojs/my-adapter
-
astro.config.mjs
ファイルのimportとdefault exportにアダプターを追加します。astro.config.mjs import { defineConfig } from 'astro/config'; import myAdapter from '@astrojs/my-adapter'; export default defineConfig({ output: 'server', adapter: myAdapter(), });
Astroのデフォルトは静的サイトジェネレーターのままです。しかし、サーバーサイドレンダリングのアダプターを有効にすると、pagesディレクトリのすべてのルートがサーバーでレンダリングされるルートになり、いくつかの新機能が利用できるようになります。
Astro.request.headers
Section titled Astro.request.headersリクエストのヘッダーは、Astro.request.headers
で取得できます。これはHeadersオブジェクトといい、Mapのようなオブジェクトで、Cookieなどのヘッダーを取得することができます。
---
const cookie = Astro.request.headers.get('cookie');
// ...
---
<html>
<!-- Page here... -->
</html>
Astro.redirect
Section titled Astro.redirectAstro
グローバルでは、このメソッドで他のページにリダイレクトすることができます。クッキーからセクションを取得して、ユーザーがログインしているかチェックした後にこれを実行します。
---
import { isLoggedIn } from '../utils';
const cookie = Astro.request.headers.get('cookie');
// ユーザーがログインしていない場合、ログインページにリダイレクトします
if (!isLoggedIn(cookie)) {
return Astro.redirect('/login');
}
---
<html>
<!-- Page here... -->
</html>
Response
Section titled ResponseどのページからでもResponseを返すこともできます。データベースでidを検索した後、動的ページで404を返す際に利用することがあります。
---
import { getProduct } from '../api';
const product = await getProduct(Astro.params.id);
// 商品(Product)が見つからなかった
if (!product) {
return new Response(null, {
status: 404,
statusText: 'Not found'
});
}
---
<html>
<!-- Page here... -->
</html>
サーバーエンドポイント
Section titled サーバーエンドポイントAPI routeとも知られているサーバーエンドポイントは、src/pages
フォルダの中にある.js
, .ts
ファイルでRequestを受け取ってResponseを返します。
SSRの強力な機能であるAPI routeはサーバーサイドでセキュアにコードを実行できます。詳しくはエンドポイントガイドをご覧ください。