Firebase in dynamischen Webanwendungen mit SSR (serverseitiges Rendering) verwenden

Wenn Sie bereits mit dem Firebase JS SDK oder anderen Firebase-Client-SDKs gearbeitet haben, kennen Sie wahrscheinlich die FirebaseApp Schnittstelle und wissen, wie Sie damit App-Instanzen konfigurieren. Um ähnliche Vorgänge auf dem Server auszuführen, Firebase bietet FirebaseServerApp.

FirebaseServerApp ist eine Variante von FirebaseApp für die Verwendung in serverseitigen Rendering-Umgebungen (SSR). Es enthält Tools, um Firebase-Sitzungen fortzusetzen, die die Grenze zwischen clientseitigem Rendering (CSR) und serverseitigem Rendering überschreiten. Diese Tools und Strategien können dazu beitragen, dynamische Web-Apps zu verbessern, die mit Firebase erstellt und in Google-Umgebungen wie Firebase App Hostingbereitgestellt werden.

Verwenden Sie FirebaseServerApp für folgende Zwecke:

  • Serverseitigen Code im Kontext des Nutzers ausführen, im Gegensatz zum Firebase Admin SDK, das vollständige Administratorrechte hat.
  • Die Verwendung von App Check in SSR-Umgebungen aktivieren.
  • Eine Firebase Auth-Sitzung fortsetzen, die auf dem Client erstellt wurde.

Der Lebenszyklus von FirebaseServerApp

Frameworks für das serverseitige Rendering (SSR) und andere Nicht-Browser-Laufzeiten wie Cloud-Worker optimieren die Initialisierungszeit, indem sie Ressourcen bei mehreren Ausführungen wiederverwenden. FirebaseServerApp ist für diese Umgebungen konzipiert und verwendet einen Mechanismus zur Referenzzählung. Wenn eine App initializeServerApp mit denselben Parametern wie ein vorheriges initializeServerApp aufruft, erhält sie dieselbe FirebaseServerApp Instanz, die bereits initialisiert wurde. Dadurch werden unnötiger Initialisierungsaufwand und Speicherzuweisungen reduziert. Wenn deleteApp für eine FirebaseServerApp Instanz aufgerufen wird, wird die Referenzzählung verringert. Die Instanz wird freigegeben, nachdem die Referenzzählung null erreicht hat.

FirebaseServerApp-Instanzen bereinigen

Es kann schwierig sein, zu wissen, wann deleteApp für eine FirebaseServerApp Instanz aufgerufen werden muss, insbesondere wenn viele asynchrone Vorgänge parallel ausgeführt werden. Das Feld releaseOnDeref der FirebaseServerAppSettings kann dies vereinfachen. Wenn Sie releaseOnDeref eine Referenz zu einem Objekt mit der Lebensdauer des Anfragengeltungsbereichs zuweisen (z. B. das Headerobjekt der SSR Anfrage), verringert FirebaseServerApp die Referenzzählung, wenn das Framework das Headerobjekt freigibt. Dadurch wird Ihre FirebaseServerApp Instanz automatisch bereinigt.

Hier ein Beispiel für die Verwendung von releaseOnDeref:

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

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

Authentifizierte Sitzungen fortsetzen, die auf dem Client erstellt wurden

Wenn eine Instanz von FirebaseServerApp mit einem Auth-ID-Token initialisiert wird, können authentifizierte Nutzersitzungen zwischen den Umgebungen für das clientseitige Rendering (CSR) und das serverseitige Rendering (SSR) überbrückt werden. Instanzen des Firebase Auth SDK, die mit einem FirebaseServerApp Objekt initialisiert wurden, das ein Auth-ID-Token enthält, versuchen, den Nutzer bei der Initialisierung anzumelden, ohne dass die Anwendung Anmeldemethoden aufrufen muss.

Durch die Bereitstellung eines Auth-ID-Tokens können Apps alle Anmeldemethoden von Auth auf dem Client verwenden. So wird sichergestellt, dass die Sitzung auf dem Server fortgesetzt wird, auch bei Anmeldemethoden, die eine Nutzerinteraktion erfordern. Außerdem können so ressourcenintensive Vorgänge wie authentifizierte Firestore-Abfragen auf den Server ausgelagert werden, was die Rendering-Leistung Ihrer App verbessern sollte.

/// 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.

App Check in SSR-Umgebungen verwenden

Die App Check-Erzwingung basiert auf einer App Check SDK-Instanz, die von Firebase SDKs verwendet wird um intern getToken aufzurufen. Das resultierende Token ist dann in Anfragen an alle Firebase-Dienste enthalten, sodass das Backend die App validieren kann.

Da das App Check SDK jedoch einen Browser benötigt, um auf bestimmte Heuristiken für die App-Validierung zuzugreifen, kann es nicht in Serverumgebungen initialisiert werden.

FirebaseServerApp bietet eine Alternative. Wenn bei der Initialisierung von FirebaseServerApp ein vom Client generiertes App Check Token bereitgestellt wird, wird es von den Firebase-Produkt-SDKs beim Aufrufen von Firebase-Diensten verwendet. Eine App Check SDK-Instanz ist dann nicht erforderlich. 

/// 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.

Client-Tokens an die serverseitige Renderingphase übergeben

Verwenden Sie einen Service Worker, um authentifizierte Auth-ID-Tokens (und App Check-Tokens) vom Client an die serverseitige Renderingphase (SSR) zu übertragen. Dabei werden Fetch-Anfragen abgefangen, die SSR auslösen, und die Tokens werden an die Anfrageheader angehängt.

Eine Referenzimplementierung eines Firebase Auth-Service Workers finden Sie unter Sitzungsverwaltung mit Service Workern. Unter Serverseitige Änderungen finden Sie Code, der zeigt, wie diese Tokens aus den Headern geparst werden, um sie bei der Initialisierung von FirebaseServerApp zu verwenden.