Utilizzare Remote Config per il rendering lato server nelle applicazioni web

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

  • Recupero e valutazione dei modelli Remote Config sul server:il tuo server può scaricare il modello Remote Config e valutare direttamente le condizioni di targeting.
  • Ottimizza le prestazioni 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, le prestazioni vengono migliorate fornendo in anticipo i dati di configurazione necessari.

Questo approccio ti consente di gestire dinamicamente 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 che seguono.

Passaggio 1: aggiorna l'applicazione lato server

Nell'app server in cui hai implementato l'SDK Node.js Firebase Admin, includi una classe RemoteConfigFetchResponse che accetti l'ServerConfig esistente. Puoi utilizzarlo per serializzare i valori di configurazione che possono essere trasmessi 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 JavaScript di Firebase, includi un'opzione di configurazione initialFetchResponse per accettare i valori serializzati trasmessi dall'app server. In questo modo, l'aggiornamento dello stato della configurazione viene eseguito 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 successivi recuperi, 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>
  );
}