Utilizzare Remote Config per il rendering lato server nelle applicazioni web

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

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

Questo approccio ti consente di gestire in modo dinamico il comportamento e la configurazione dell'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

Nella tua app server, in cui hai implementato l'SDK Firebase Admin Node.js, includi una classe RemoteConfigFetchResponse che accetta l'ServerConfig esistente. Puoi utilizzarlo 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

Nella tua app client, che implementa l'SDK Firebase JavaScript, includi un'opzione di configurazione initialFetchResponse per accettare i valori serializzati passati dalla tua app server. In questo modo, lo stato della configurazione viene ripristinato 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>
  );
}