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 sie zum Konfigurieren von App-Instanzen verwenden. Um ähnliche Vorgänge auf der Serverseite zu ermöglichen, bietet Firebase FirebaseServerApp.

FirebaseServerApp ist eine Variante von FirebaseApp für die Verwendung in Umgebungen mit serverseitigem Rendering (SSR). Es enthält Tools, um Firebase-Sitzungen fortzusetzen, die sich über clientseitiges Rendering (CSR) und serverseitiges Rendering erstrecken. Mit diesen Tools und Strategien lassen sich dynamische Web-Apps, die mit Firebase erstellt und in Google-Umgebungen wie Firebase App Hosting bereitgestellt werden, optimieren.

Funktionen von FirebaseServerApp:

  • Serverseitigen Code im Nutzerkontext ausführen, im Gegensatz zum Firebase Admin SDK, das vollständige Administratorrechte hat.
  • Verwendung von App Check in SSR-Umgebungen aktivieren
  • Eine im Client erstellte Firebase Auth-Sitzung fortsetzen.

Der FirebaseServerApp-Lebenszyklus

Frameworks für das serverseitige Rendern (Server-Side 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 vorheriger initializeServerApp aufruft, erhält sie dieselbe FirebaseServerApp-Instanz, die bereits initialisiert wurde. Dadurch werden unnötige Initialisierungsaufwand und Speicherzuweisungen reduziert. Wenn deleteApp für eine FirebaseServerApp-Instanz aufgerufen wird, wird die Referenzanzahl verringert und die Instanz wird freigegeben, nachdem die Referenzanzahl null erreicht hat.

FirebaseServerApp-Instanzen bereinigen

Es kann schwierig sein, zu wissen, wann deleteApp für eine FirebaseServerApp-Instanz aufgerufen werden soll, insbesondere wenn Sie viele asynchrone Vorgänge parallel ausführen. Das Feld releaseOnDeref des FirebaseServerAppSettings vereinfacht dies. Wenn Sie releaseOnDeref eine Referenz zu einem Objekt mit der Lebensdauer des Anforderungsbereichs zuweisen (z. B. das Header-Objekt der SSR-Anfrage), verringert FirebaseServerApp die Anzahl der Referenzen, wenn das Framework das Header-Objekt zurückfordert. 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();
  appSettings.releaseOnDeref = headersObj;
  let appSettings: FirebaseServerAppSettings = {};
  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 clientseitiges Rendering (CSR) und serverseitiges Rendering (SSR) überbrückt werden. Bei Instanzen des Firebase Auth SDK, die mit einem FirebaseServerApp-Objekt initialisiert werden, das ein Auth-ID-Token enthält, wird versucht, 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 dafür gesorgt, dass die Sitzung serverseitig fortgesetzt wird, auch bei Anmeldemethoden, die eine Nutzerinteraktion erfordern. Außerdem können so rechenintensive 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-Durchsetzung basiert auf einer App Check SDK-Instanz, die von Firebase SDKs verwendet wird, um intern getToken aufzurufen. Das resultierende Token wird dann in Anfragen an alle Firebase-Dienste eingefügt, 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 angegeben wird, wird es von den Firebase-Produkt-SDKs beim Aufrufen von Firebase-Diensten verwendet. Eine App Check SDK-Instanz ist dann nicht mehr 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 Rendering-Phase übergeben

Wenn Sie authentifizierte Auth-ID-Tokens (und App Check-Tokens) vom Client an die serverseitige Renderingphase (SSR) übertragen möchten, verwenden Sie einen Service Worker. Bei diesem Ansatz 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.