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

如果您曾使用 Firebase JS SDK 或其他 Firebase 用戶端 SDK，可能已熟悉 FirebaseApp 介面，以及如何使用該介面設定應用程式例項。為方便在伺服器端執行類似作業，Firebase 提供 FirebaseServerApp。

FirebaseServerApp 是 FirebaseApp 的變體，適用於伺服器端算繪 (SSR) 環境。這項功能包含的工具可繼續執行跨用戶端轉譯 (CSR) / 伺服器端轉譯的 Firebase 工作階段。這些工具和策略有助於提升以 Firebase 建構並部署在 Google 環境 (例如 Firebase App Hosting) 中的動態網頁應用程式。

FirebaseServerApp 可用來：

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

FirebaseServerApp 生命週期

伺服器端算繪 (SSR) 架構和其他非瀏覽器執行階段 (例如雲端工作人員) 會在多次執行時重複使用資源，藉此縮短初始化時間。FirebaseServerApp 採用參照計數機制，可因應這些環境。如果應用程式使用與先前 initializeServerApp 相同的參數叫用 initializeServerApp，則會收到已初始化的相同 FirebaseServerApp 執行個體。這樣可減少不必要的初始化負擔和記憶體配置。在 FirebaseServerApp 執行個體上叫用 deleteApp 時，系統會減少參照計數，並在參照計數達到零後釋放執行個體。

清除 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);
  ...
}

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

以 Auth ID 權杖初始化 FirebaseServerApp 例項時，系統會啟用用戶端轉譯 (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 強制執行功能會使用 Firebase SDK 呼叫 getToken 的 App Check SDK 執行個體。然後，將產生的權杖納入所有 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) 階段，請使用 Service Worker。這個方法會攔截觸發 SSR 的擷取要求，並將權杖附加至要求標頭。

如需 Firebase Auth 服務工作人員的參考實作方式，請參閱「使用服務工作人員管理工作階段」。另請參閱「伺服器端變更」，瞭解如何剖析標頭中的這些權杖，以便在 FirebaseServerApp 初始化作業中使用。