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

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'
});

SSRを有効にしたプロジェクトをデプロイするには、アダプターを追加する必要があります。SSRはサーバーサイドのコードを実行する環境であるサーバーランタイムが必要なためです。各アダプターによって、Astroは特定のランタイムでプロジェクトを実行するスクリプトを出力できます。

現在、次に示すアダプターが利用でき、今後追加されていきます。

astro addを使ったインストール

Section titled astro addを使ったインストール

公式のアダプターはastro addコマンドを使って追加できます。アダプターのインストールとastro.config.mjsファイルへの適切な変更が一度に行われます。例えば、Netlifyアダプターをインストールするには次のコマンドを実行します。

Terminal window
npx astro add netlify

パッケージをインストールし、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(),
    });

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

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

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

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を返すこともできます。データベースで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はサーバーサイドでセキュアにコードを実行できます。詳しくはエンドポイントガイドをご覧ください。