ウェブ アプリケーションのサーバーサイド レンダリングに Remote Config を使用する

最大限の柔軟性を提供するため、Firebase Remote Config は、ウェブ アプリケーションのクライアントサイド SDK とサーバーサイド SDK の両方の統合をサポートしています。つまり、アプリは次の操作を行えます。

  • サーバーで Remote Config テンプレートを取得して評価する: サーバーで Remote Config テンプレートをダウンロードし、ターゲティング条件を直接評価できます。
  • 初回のページ読み込みのパフォーマンスを最適化する: サーバーサイド レンダリングのシナリオの場合、サーバーは初回のページ読み込み時に評価済みの構成をクライアントに提供できます。これにより、必要な構成データが事前に提供されて、パフォーマンスが向上します。

このアプローチにより、特にサーバーサイド レンダリングの設定で、アプリの動作と構成を動的に管理できます。

アプリのサーバーサイド レンダリングを設定する

ウェブアプリで Remote Config を使用してサーバーサイド レンダリングを構成するには、次の手順に沿ってクライアント アプリとサーバーアプリを更新します。

ステップ 1: サーバーサイド アプリケーションを更新する

Firebase Admin Node.js SDK を実装したサーバーアプリに、既存の ServerConfig を受け入れる RemoteConfigFetchResponse クラスを含めます。これは、クライアントに渡すことができる構成値をシリアル化するために使用できます。


export default async function MyServerComponent() {
  const serverApp = initializeApp();
  const serverSideConfig = getRemoteConfig(serverApp);
  const template = await serverSideConfig.getServerTemplate();
  const config = template.evaluate({randomizationId: 'some-uuid'});
  const fetchResponse = new RemoteConfigFetchResponse(serverApp, config);

  return (
    <div>
      <MyClientComponent initialFetchResponse={fetchResponse}></MyClientComponent>
    </div>
  );
}

ステップ 2: クライアント アプリを更新する

Firebase JavaScript SDK を実装するクライアント アプリに、サーバーアプリから渡されたシリアル化された値を受け入れるための initialFetchResponse 構成オプションを含めます。これにより、非同期フェッチ リクエストを実行せずに、構成状態を手動でハイドレートできます。

また、クライアント SDK で firebase-server を templateId として設定できる初期化オプションを含める必要があります。これにより、SDK は後続のフェッチで初期サーバーサイド テンプレートを使用するように構成され、クライアントとサーバー間でパラメータと条件値の一貫性が確保されます。


export default function MyClientComponent({initialFetchResponse= ''} = {}) {
  const app = initializeApp(firebaseConfig);
  const config = getRemoteConfig(app, {
        templateId: 'firebase-server',
        initialFetchResponse
  });
  const paramValue = getString(config, 'my_rc_parameter_key');

  return (
    <div>{paramValue}</div>
  );
}