サーバーサイドレンダリング

Astroではサーバーサイドレンダリング（別名：SSR）が利用できます。SSRを有効にすると、次のようなことができます。

  • アプリのログイン状態のためにセッションを実装する。
  • fetchを使って動的にAPIを呼び出しデータを表示する。
  • アダプターを利用してサイトをホストにデプロイする。

プロジェクトでSSRを有効にする

Section titled プロジェクトでSSRを有効にする

まずは設定オプションoutput: serverを使って開発モードでのSSRを有効にします。

astro.config.mjs 
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アダプターをインストールするには次のコマンドを実行します。

Terminal window 
npx astro add netlify

手動でインストール

Section titled 手動でインストール

パッケージをインストールし、astro.config.mjsを更新して手動でアダプターを追加することもできます。（SSRを有効にするために必要な2つの手順については上記のリンクをご覧ください）my-adapterをプレースホルダーの例として、次のような手順になります。

  1. 好みのパッケージマネージャーを利用してプロジェクトの依存関係にアダプターをインストールします。

    Terminal window 
    npm install @astrojs/my-adapter

  2. 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(),
});

機能

Section titled 機能

Astroのデフォルトは静的サイトジェネレーターのままです。しかし、サーバーサイドレンダリングのアダプターを有効にすると、pagesディレクトリのすべてのルートがサーバーでレンダリングされるルートになり、いくつかの新機能が利用できるようになります。

Astro.request.headers

Section titled Astro.request.headers

リクエストのヘッダーは、Astro.request.headersで取得できます。これはHeadersオブジェクトといい、Mapのようなオブジェクトで、Cookieなどのヘッダーを取得することができます。

src/pages/index.astro 
---
const cookie = Astro.request.headers.get('cookie');
// ...
---
<html>
  <!-- Page here... -->
</html>

Astro.redirect

Section titled Astro.redirect

Astroグローバルでは、このメソッドで他のページにリダイレクトすることができます。クッキーからセクションを取得して、ユーザーがログインしているかチェックした後にこれを実行します。

src/pages/account.astro 
---
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を返す際に利用することがあります。

src/pages/[id].astro 
---
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はサーバーサイドでセキュアにコードを実行できます。詳しくはエンドポイントガイドをご覧ください。