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

Se hai lavorato con l'SDK Firebase JS o altri SDK client Firebase, probabilmente conosci l'interfaccia FirebaseApp e sai come utilizzarla per configurare le istanze dell'app. Per facilitare operazioni simili sul 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 divisione tra rendering lato client (CSR) e rendering lato server. Questi strumenti e strategie possono contribuire a migliorare le app web dinamiche create con Firebase e implementate in ambienti Google come Firebase App Hosting.

Usa FirebaseServerApp per:

• Esegui il codice lato server nel contesto utente, a differenza dell'SDK Firebase Admin, che dispone di diritti amministrativi completi.
• Abilita l'utilizzo di App Check negli ambienti SSR.
• Continua una sessione di Firebase Auth creata nel client.

Il ciclo di vita di FirebaseServerApp

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

Pulizia delle istanze FirebaseServerApp

Può essere difficile sapere quando chiamare deleteApp su un'istanza FirebaseServerApp, soprattutto se esegui molte operazioni asincrone in parallelo. Il campo releaseOnDeref di FirebaseServerAppSettings semplifica questa operazione. Se assegni a releaseOnDeref un riferimento a un oggetto con la durata dell'ambito della richiesta (ad esempio, l'oggetto delle intestazioni della richiesta SSR), FirebaseServerApp ridurrà il conteggio dei riferimenti quando il framework recupera l'oggetto delle intestazioni. che pulisce automaticamente l'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);
  ...
}

Riprendere le sessioni autenticate create sul client

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

Fornire un token ID autenticazione consente alle app di utilizzare qualsiasi metodo di accesso di autenticazione sul client, garantendo che la sessione continui sul lato server, anche per i metodi di accesso che richiedono l'interazione dell'utente. Inoltre, consente il trasferimento di operazioni intensive al server, come le query Firestore autenticate, il che dovrebbe migliorare il rendimento del rendering della tua 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 quindi 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 euristiche specifiche per la convalida delle app, non può essere inizializzato negli ambienti server.

FirebaseServerApp fornisce un'alternativa. Se viene fornito un token App Check generato dal client durante l'inizializzazione di FirebaseServerApp, questo 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.

Trasferire i token client alla fase di rendering lato server

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

Per un'implementazione di riferimento di un service worker di Firebase Auth, consulta Gestione delle sessioni con i service worker. Consulta anche Modifiche lato server per il codice che mostra come analizzare questi token dalle intestazioni per l'utilizzo nell'inizializzazione di FirebaseServerApp.