Utiliser Firebase dans des applications Web dynamiques avec le rendu côté serveur (SSR)

Si vous avez déjà utilisé le SDK JS Firebase ou d'autres SDK clients Firebase, vous connaissez probablement l'interface FirebaseApp et savez comment l'utiliser pour configurer les instances d'application. Pour faciliter les opérations similaires côté serveur, Firebase fournit FirebaseServerApp.

FirebaseServerApp est une variante de FirebaseApp à utiliser dans les environnements de rendu côté serveur (SSR). Il inclut des outils permettant de poursuivre les sessions Firebase qui s'étendent sur la division entre le rendu côté client (CSR) et le rendu côté serveur. Ces outils et stratégies peuvent vous aider à améliorer les applications Web dynamiques créées avec Firebase et déployées dans des environnements Google tels que Firebase App Hosting.

Utiliser FirebaseServerApp pour :

  • Exécutez le code côté serveur dans le contexte de l'utilisateur, contrairement au SDK Firebase Admin qui dispose de droits d'administration complets.
  • Activez l'utilisation d'App Check dans les environnements SSR.
  • Poursuivre une session Firebase Auth créée dans le client.

Cycle de vie de FirebaseServerApp

Les frameworks de rendu côté serveur (SSR) et autres runtimes non liés au navigateur, tels que les workers cloud, optimisent le temps d'initialisation en réutilisant les ressources lors de plusieurs exécutions. FirebaseServerApp est conçu pour s'adapter à ces environnements en utilisant un mécanisme de décompte des références. Si une application appelle initializeServerApp avec les mêmes paramètres qu'un initializeServerApp précédent, elle reçoit la même instance FirebaseServerApp qui a déjà été initialisée. Cela permet de réduire les frais généraux d'initialisation et les allocations de mémoire inutiles. Lorsque deleteApp est appelé sur une instance FirebaseServerApp, il réduit le nombre de références, et l'instance est libérée une fois que le nombre de références atteint zéro.

Nettoyer les instances FirebaseServerApp

Il peut être difficile de savoir quand appeler deleteApp sur une instance FirebaseServerApp, en particulier si vous exécutez de nombreuses opérations asynchrones en parallèle. Le champ releaseOnDeref de FirebaseServerAppSettings permet de simplifier cette opération. Si vous attribuez releaseOnDeref une référence à un objet dont la durée de vie correspond à la portée de la requête (par exemple, l'objet d'en-têtes de la requête SSR), FirebaseServerApp réduit son nombre de références lorsque le framework récupère l'objet d'en-têtes. Cela nettoie automatiquement votre instance FirebaseServerApp.

Voici un exemple d'utilisation de 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);
  ...
}

Reprendre les sessions authentifiées créées sur le client

Lorsqu'une instance de FirebaseServerApp est initialisée avec un jeton d'ID d'authentification, elle permet de faire le pont entre les sessions utilisateur authentifiées dans les environnements de rendu côté client (CSR) et de rendu côté serveur (SSR). Les instances du SDK Firebase Auth initialisées avec un objet FirebaseServerApp contenant un jeton d'ID d'authentification tenteront de connecter l'utilisateur lors de l'initialisation sans que l'application ait besoin d'appeler de méthodes de connexion.

Fournir un jeton d'ID d'authentification permet aux applications d'utiliser n'importe quelle méthode de connexion d'Auth sur le client, ce qui garantit que la session se poursuit côté serveur, même pour les méthodes de connexion qui nécessitent une interaction de l'utilisateur. Il permet également de décharger les opérations intensives sur le serveur, comme les requêtes Firestore authentifiées, ce qui devrait améliorer les performances de rendu de votre application.

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

Utiliser App Check dans les environnements SSR

L'application App Check repose sur une instance du SDK App Check que les SDK Firebase utilisent pour appeler en interne getToken. Le jeton obtenu est ensuite inclus dans les requêtes adressées à tous les services Firebase, ce qui permet au backend de valider l'application.

Toutefois, comme le SDK App Check a besoin d'un navigateur pour accéder à des heuristiques spécifiques pour la validation des applications, il ne peut pas être initialisé dans les environnements serveur.

FirebaseServerApp offre une alternative. Si un jeton App Check généré par le client est fourni lors de l'initialisation de FirebaseServerApp, il sera utilisé par les SDK des produits Firebase lors de l'appel des services Firebase, ce qui élimine le besoin d'une instance du 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.

Transmettre les jetons client à la phase de rendu côté serveur

Pour transmettre des jetons d'ID d'authentification (et des jetons App Check) authentifiés du client à la phase de rendu côté serveur (SSR), utilisez un service worker. Cette approche consiste à intercepter les requêtes d'extraction qui déclenchent le SSR et à ajouter les jetons aux en-têtes de requête.

Pour obtenir une implémentation de référence d'un service worker Firebase Authentication, consultez Gestion des sessions avec les service workers. Consultez également Modifications côté serveur pour obtenir un code qui montre comment analyser ces jetons à partir des en-têtes pour les utiliser dans l'initialisation FirebaseServerApp.