Utilizzare Firebase nelle app web dinamiche con il rendering lato server (SSR)

Se hai utilizzato l'SDK Firebase JS o altri SDK client Firebase, probabilmente hai familiarità con l'interfaccia FirebaseApp e con come utilizzarla per configurare le istanze dell'app. Per facilitare operazioni simili lato server, Firebase fornisce FirebaseServerApp.

FirebaseServerApp è una variante di FirebaseApp da utilizzare negli ambienti di rendering lato server (SSR). Include strumenti per continuare le sessioni Firebase che coprono la differenza tra il rendering lato client (CSR) e il rendering lato server. Questi strumenti e queste strategie possono contribuire a migliorare le app web dinamiche create con Firebase e implementate in ambienti Google come Firebase App Hosting.

Usa FirebaseServerApp per:

  • Eseguire codice lato server nel contesto dell'utente, diversamente dall'SDK Firebase Admin, che dispone di diritti di amministrazione completi.
  • Attiva l'utilizzo di App Check negli ambienti SSR.
  • Continuare una sessione di Firebase Auth creata nel client.

Ciclo di vita di FirebaseServerApp

I framework di rendering lato server (SSR) e altri ambienti di runtime non browser come i worker cloud eseguono l'ottimizzazione in base al tempo di inizializzazione riutilizzando le risorse in più esecuzioni. FirebaseServerApp è progettato per adattarsi a questi ambienti utilizzando un meccanismo di conteggio delle referenze. Se un'app richiama initializeServerApp con gli stessi parametri di uninitializeServerApp precedente, riceve la stessa istanza FirebaseServerApp che è già stata inizializzata. In questo modo si riduce l'overhead di inizializzazione e le allocazioni di memoria non necessarie. Quando deleteApp viene invocato su un'istanza FirebaseServerApp, riduce il conteggio dei riferimenti e l'istanza viene liberata dopo che il conteggio dei riferimenti raggiunge lo zero.

Pulizia delle istanze FirebaseServerApp

Può essere complicato sapere quando chiamare deleteApp su un'istanza FirebaseServerApp, soprattutto se esegui molte operazioni asincrone in parallelo. Il campo releaseOnDeref dell'elemento FirebaseServerAppSettings contribuisce a semplificare questa operazione. Se assegni a releaseOnDeref un riferimento a un oggetto con il lifetime dell'ambito della richiesta (ad esempio l'oggetto intestazioni della richiesta SSR), releaseOnDeref ridurrà il conteggio dei riferimenti quando il framework recupererà l'oggetto intestazione.FirebaseServerApp Verrà eseguita automaticamente la pulizia dell'istanza FirebaseServerApp.

Ecco un esempio di utilizzo di releaseOnDeref:

/// Next.js
import { headers } from 'next/headers'
import { FirebaseServerAppSettings, initializeServerApp} from "@firebase/app";

export default async function Page() {
  const headersObj = await headers();
  appSettings.releaseOnDeref = headersObj;
  let appSettings: FirebaseServerAppSettings = {};
  const serverApp = initializeServerApp(firebaseConfig, appSettings);
  ...
}

Riprendi le sessioni autenticate create sul client

Quando un'istanza di FirebaseServerApp viene inizializzata con un token Auth ID, consente di collegare le sessioni utente autenticate tra gli ambienti di rendering lato client (CSR) e di rendering lato server (SSR). Le istanze dell'SDK Firebase Auth inizializzate con un oggetto FirebaseServerApp contenente un token ID autenticazione tenteranno di far accedere l'utente all'inizializzazione senza che l'applicazione debba invocare alcun metodo di accesso.

Fornendo un token ID Auth, le app possono utilizzare qualsiasi metodo di accesso di Auth sul client, garantendo la continuità della sessione lato server, anche per i metodi di accesso che richiedono l'interazione dell'utente. Inoltre, consente di eseguire il offload delle operazioni intensive sul server, ad esempio le query Firestore autenticate, il che dovrebbe migliorare le prestazioni di rendering dell'app.

/// Next.js
import { initializeServerApp } from "firebase/app";
import { getAuth } from "firebase/auth";

// Replace the following with your app's
// Firebase project configuration
const firebaseConfig = {
  // ...
};

const firebaseServerAppSettings = {
  authIdToken: token  // See "Pass client tokens to the server side
                      // rendering phase" for an example on how transmit
                      // the token from the client and the server.
}

const serverApp =
  initializeServerApp(firebaseConfig,
                      firebaseServerAppSettings);
const serverAuth = getAuth(serverApp);

// FirebaseServerApp and Auth will now attempt
// to sign in the current user based on provided
// authIdToken.

Utilizzare App Check negli ambienti SSR

L'applicazione di App Check si basa su un'istanza dell'SDK App Check utilizzata dagli SDK Firebase per chiamare internamente getToken. Il token risultante viene poi incluso nelle richieste a tutti i servizi Firebase, consentendo al backend di convalidare l'app.

Tuttavia, poiché l'SDK App Check ha bisogno di un browser per accedere a strategie di euristica specifiche per la convalida delle app, non può essere inizializzato in ambienti server.

FirebaseServerApp fornisce un'alternativa. Se durante l'inizializzazione di FirebaseServerApp viene fornito un token App Check generato dal client, verrà utilizzato dagli SDK dei prodotti Firebase quando vengono richiamati i servizi Firebase, eliminando la necessità di un'istanza dell'SDK App Check.

/// Next.js
import { initializeServerApp } from "firebase/app";

// Replace the following with your app's
// Firebase project configuration
const firebaseConfig = {
  // ...
};

const firebaseServerAppSettings = {
  appCheckToken: token // See "Pass client tokens to the server side
                       // rendering phase" for an example on how transmit
                       // the token from the client and the server.
}

const serverApp =
  initializeServerApp(firebaseConfig,
                      firebaseServerAppSettings);

// The App Check token will now be appended to all Firebase service requests.

Passare i token client alla fase di rendering lato server

Per trasmettere i token Auth ID (e i token App Check) autenticati dal client alla fase di rendering lato server (SSR), utilizza un service worker. Questo approccio prevede l'intercettazione delle richieste di recupero che attivano l'SSR e l'aggiunta dei token alle intestazioni delle richieste.

Consulta la sezione Gestione delle sessioni con i worker di servizio per un'implementazione di riferimento di un worker di servizio Firebase Auth. Consulta anche Modifiche lato server per il codice che mostra come analizzare questi token dalle intestazioni per utilizzarli nell'inizializzazione di FirebaseServerApp.