Remote Config für serverseitiges Rendering in Webanwendungen verwenden

Um maximale Flexibilität zu bieten, unterstützt Firebase Remote Config sowohl clientseitige als auch serverseitige SDK-Integrationen für Webanwendungen. Das bedeutet, dass Ihre App Folgendes tun kann:

• Remote Config-Vorlagen auf Ihrem Server abrufen und auswerten:Ihr Server kann die Remote Config-Vorlage herunterladen und Targeting-Bedingungen direkt auswerten.
• Leistung beim ersten Seitenaufbau optimieren:Bei serverseitigen Rendering-Szenarien kann der Server die ausgewertete Konfiguration während des ersten Seitenaufbaus an den Client senden. Dadurch wird die Leistung verbessert, da die erforderlichen Konfigurationsdaten im Voraus bereitgestellt werden.

Wichtig :Der Schwerpunkt dieser Funktion liegt auf der serverseitigen Auswertung. Die clientseitige Auswertung wird nicht unterstützt.

So können Sie das Verhalten und die Konfiguration Ihrer App dynamisch verwalten, insbesondere bei der serverseitigen Darstellung.

Serverseitiges Rendering für Ihre Apps einrichten

Wenn Sie serverseitiges Rendering mit Remote Config in Ihrer Web-App konfigurieren möchten, aktualisieren Sie Ihre Client- und Server-Apps mit den folgenden Schritten.

Schritt 1: Serverseitige Anwendung aktualisieren

Fügen Sie in Ihre Server-App, in der Sie das Firebase Admin Node.js SDK implementiert haben, eine RemoteConfigFetchResponse-Klasse ein, die die vorhandene ServerConfig akzeptiert. Damit können Sie Konfigurationswerte serialisieren, die an Ihren Client übergeben werden können.

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

Schritt 2: Client-App aktualisieren

Fügen Sie in Ihre Client-App, in der das Firebase JavaScript SDK implementiert ist, die Konfigurationsoption initialFetchResponse ein, um die serialisierten Werte zu akzeptieren, die von Ihrer Server-App übergeben werden. Dadurch wird der Konfigurationsstatus manuell rehydriert, ohne dass eine asynchrone Abrufanfrage gesendet wird.

Außerdem müssen Sie eine Initialisierungsoption einfügen, mit der Sie die firebase-server als templateId im Client-SDK festlegen können. Dadurch wird das SDK so konfiguriert, dass für nachfolgende Abrufe die ursprüngliche serverseitige Vorlage verwendet wird. So werden konsistente Parameter und bedingte Werte zwischen Client und Server gewährleistet.

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