使用遠端設定在網路應用程式中進行伺服器端轉譯

為了提供最大的彈性,Firebase Remote Config 同時支援用於網頁應用程式的用戶端和伺服器端 SDK 整合。也就是說,您的應用程式可以:

  • 在伺服器上擷取及評估 Remote Config 範本:您的伺服器可以下載 Remote Config 範本,並直接評估指定條件。
  • 提升初始網頁載入效能:在伺服器端轉譯情境中,伺服器可以在初始網頁載入期間,為用戶端提供評估過的設定。這可提前提供必要的設定資料,進而提升效能。

這個方法可讓您動態管理應用程式的行為和設定,尤其是在伺服器端轉譯設定中。

為應用程式設定伺服器端轉譯

如要在網路應用程式中使用 Remote Config 設定伺服器端算繪,請按照下列步驟更新用戶端和伺服器應用程式。

步驟 1:更新伺服器端應用程式

在您導入 Firebase Admin Node.js SDK 的伺服器應用程式中,加入可接受現有 ServerConfigRemoteConfigFetchResponse 類別。您可以使用此方法將可傳遞至用戶端的設定值序列化。


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 設定選項,以便接受從伺服器應用程式傳遞的序列化值。這麼做可手動重新整理設定狀態,而無須發出非同步擷取要求。

此外,您必須加入初始化選項,讓您將 firebase-server 設為用戶端 SDK 上的 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>
  );
}