Utilizzare Remote Config per il rendering lato server nelle applicazioni web

Per offrire la massima flessibilità, Firebase Remote Config supporta sia le integrazioni degli SDK lato client che lato server per le applicazioni web. Ciò significa che la tua app può:

• Recuperare e valutare i modelli Remote Config sul server: il server può scaricare il modello Remote Config e valutare direttamente le condizioni di targeting.
• Ottimizzare il rendimento del caricamento iniziale della pagina: per gli scenari di rendering lato server, il server può fornire la configurazione valutata al client durante il caricamento iniziale della pagina. In questo modo, il rendimento migliora perché i dati di configurazione necessari vengono forniti in anticipo.

Questo approccio ti consente di gestire in modo dinamico il comportamento e la configurazione della tua app, in particolare nelle configurazioni di rendering lato server.

Configurare il rendering lato server per le app

Per configurare il rendering lato server con Remote Config nella tua app web, aggiorna le app client e server seguendo i passaggi riportati di seguito.

Passaggio 1: aggiorna l'applicazione lato server

Nell'app server, in cui hai implementato l'SDK Firebase Admin Node.js, includi una classe RemoteConfigFetchResponse che accetta l'oggetto esistente ServerConfig . Puoi utilizzarla per serializzare i valori di configurazione che possono essere passati al client.

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

Passaggio 2: aggiorna l'app client

Nell'app client, che implementa l'SDK Firebase JavaScript, includi un'opzione di configurazione initialFetchResponse per accettare i valori serializzati passati dall'app server. In questo modo, lo stato di configurazione viene idratato manualmente senza effettuare una richiesta di recupero asincrona.

Inoltre, devi includere un'opzione di inizializzazione che ti consenta di impostare firebase-server come templateId nell'SDK client. In questo modo, l'SDK viene configurato per utilizzare il modello lato server iniziale per i recuperi successivi, garantendo parametri e valori condizionali coerenti tra client e server.

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