在動態網頁應用程式中使用 Firebase 搭配 SSR (伺服器端轉譯)

如果您曾使用 Firebase JS SDK 或其他 Firebase 用戶端 SDK，可能就熟悉 FirebaseApp 介面，也知道如何使用該介面設定應用程式執行個體。為了在伺服器端執行類似的作業，Firebase 提供 FirebaseServerApp。

FirebaseServerApp 是 FirebaseApp 的變體，可用於伺服器端算繪 (SSR) 環境。其中包含可跨越用戶端轉譯 (CSR) / 伺服器端轉譯 (SSR) 分隔線繼續 Firebase 工作階段的工具。這些工具和策略有助於改善使用 Firebase 建構，並部署在 Firebase App Hosting 等 Google 環境中的動態網頁應用程式。

FirebaseServerApp 可用於：

在 user 內容中執行伺服器端程式碼，與擁有完整管理權限的 Firebase Admin SDK 不同。
在 SSR 環境中啟用 App Check。
繼續在用戶端建立的 Firebase 認證工作階段。

FirebaseServerApp 生命週期

伺服器端算繪 (SSR) 架構和其他非瀏覽器執行階段 (例如雲端工作者) 會在多個執行作業中重複使用資源，以便縮短初始化時間。FirebaseServerApp 的設計目的是透過參照計數機制，適應這些環境。如果應用程式以與先前 initializeServerApp 相同的參數叫用 initializeServerApp，則會接收已初始化的相同 FirebaseServerApp 例項。這可減少不必要的初始化額外負擔和記憶體配置。當 deleteApp 在 FirebaseServerApp 例項上叫用時，它會減少參照計數，並在參照計數達到零時釋放例項。

清除 `FirebaseServerApp` 執行個體

在 FirebaseServerApp 例項上呼叫 deleteApp 的時間點可能很難掌握，尤其是在同時執行多項非同步作業時。FirebaseServerAppSettings 的 releaseOnDeref 欄位有助於簡化這項作業。如果您將 releaseOnDeref 指派給具有要求範圍生命週期的物件參照 (例如 SSR 要求的標頭物件)，當架構回收標頭物件時，FirebaseServerApp 就會減少其參照計數。這麼做會自動清理 FirebaseServerApp 執行個體。

以下是 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);
  ...
}

繼續執行在用戶端上建立的已驗證工作階段

當 FirebaseServerApp 的例項使用 Auth ID 權杖初始化時，可在用戶端轉譯 (CSR) 和伺服器端轉譯 (SSR) 環境之間建立已驗證的使用者工作階段橋接。使用含有 Auth ID 權杖的 FirebaseServerApp 物件初始化的 Firebase Auth SDK 例項，會在初始化時嘗試讓使用者登入，而不需要應用程式叫用任何登入方法。

提供 Auth ID 權杖可讓應用程式在用戶端上使用 Auth 的任何登入方法，確保工作階段在伺服器端繼續進行，即使是需要使用者互動的登入方法也一樣。此外，這項功能還可將密集作業卸載至伺服器，例如經過驗證的 Firestore 查詢，這應該可改善應用程式的算繪效能。

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

在 SSR 環境中使用 App Check

App Check 的強制執行機制會依賴 App Check SDK 例項，Firebase SDK 會使用該例項在內部呼叫 getToken。系統會將產生的權杖納入所有 Firebase 服務的要求中，讓後端驗證應用程式。

不過，由於 App Check SDK 需要瀏覽器才能存取特定的應用程式驗證規則，因此無法在伺服器環境中初始化。

FirebaseServerApp 提供了另一種做法。如果在 FirebaseServerApp 初始化期間提供由用戶端產生的 App Check 權杖，Firebase 產品 SDK 會在叫用 Firebase 服務時使用該權杖，因此不需要 App Check SDK 例項。

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

將用戶端權杖傳遞至伺服器端轉譯階段

如要將已驗證的 Auth ID 權杖 (和 App Check 權杖) 從用戶端傳送至伺服器端算繪 (SSR) 階段，請使用服務工作者。這個方法會攔截觸發 SSR 的擷取要求，並將符記附加至要求標頭。

如要參考 Firebase Auth 服務 worker 的實作方式，請參閱「使用服務 worker 管理工作階段」。如需示範如何從標頭剖析這些符記，以便在 FirebaseServerApp 初始化中使用，請參閱「伺服器端變更」一節的程式碼。