ใช้ Firebase ในเว็บแอปแบบไดนามิกด้วย SSR (การแสดงผลฝั่งเซิร์ฟเวอร์)

หากเคยใช้ Firebase JS SDK หรือ Firebase Client SDK อื่นๆ คุณอาจคุ้นเคยกับอินเทอร์เฟซ FirebaseApp และวิธีใช้เพื่อกำหนดค่าอินสแตนซ์ของแอป Firebase มี FirebaseServerApp เพื่ออำนวยความสะดวกในการดำเนินการที่คล้ายกันในฝั่งเซิร์ฟเวอร์

FirebaseServerApp เป็นตัวแปรของ FirebaseApp สำหรับใช้ในสภาพแวดล้อมการแสดงผลฝั่งเซิร์ฟเวอร์ (SSR) ซึ่งรวมถึงเครื่องมือในการดำเนินการเซสชัน Firebase ต่อไป ที่ครอบคลุมการแสดงผลฝั่งไคลเอ็นต์ (CSR) / การแสดงผลฝั่งเซิร์ฟเวอร์ เครื่องมือและกลยุทธ์เหล่านี้ช่วยปรับปรุงเว็บแอปแบบไดนามิกที่สร้างด้วย Firebase และ ติดตั้งใช้งานในสภาพแวดล้อมของ Google เช่น Firebase App Hosting ได้

ใช้ FirebaseServerApp เพื่อทำสิ่งต่อไปนี้

• เรียกใช้โค้ดฝั่งเซิร์ฟเวอร์ภายในบริบทของผู้ใช้ ซึ่งแตกต่างจาก Firebase Admin SDK ที่มีสิทธิ์การดูแลระบบเต็มรูปแบบ
• เปิดใช้ App Check ในสภาพแวดล้อม SSR
• ดำเนินการต่อในเซสชัน Firebase Auth ที่สร้างในไคลเอ็นต์

วงจรการใช้งาน FirebaseServerApp

เฟรมเวิร์กการแสดงผลฝั่งเซิร์ฟเวอร์ (SSR) และรันไทม์อื่นๆ ที่ไม่ใช่เบราว์เซอร์ เช่น Cloud Worker จะเพิ่มประสิทธิภาพเวลาเริ่มต้นโดยการนำทรัพยากรกลับมาใช้ใหม่ในการดำเนินการหลายครั้ง FirebaseServerApp ออกแบบมาเพื่อรองรับสภาพแวดล้อมเหล่านี้ โดยใช้กลไกการนับอ้างอิง หากแอปเรียกใช้ initializeServerApp โดยใช้พารามิเตอร์เดียวกันกับ initializeServerApp ก่อนหน้า แอปจะได้รับอินสแตนซ์ FirebaseServerApp เดียวกันกับที่ เริ่มต้นไว้แล้ว ซึ่งจะช่วยลดค่าใช้จ่ายในการเริ่มต้นที่ไม่จำเป็น และการจัดสรรหน่วยความจำ เมื่อเรียกใช้ deleteApp ในอินสแตนซ์ FirebaseServerApp ระบบจะลดจำนวนการอ้างอิง และจะปล่อยอินสแตนซ์หลังจากที่ จำนวนการอ้างอิงเป็น 0

การล้างข้อมูลอินสแตนซ์ FirebaseServerApp

การทราบเวลาที่ควรเรียกใช้ deleteApp ในอินสแตนซ์ FirebaseServerApp อาจเป็นเรื่องยาก โดยเฉพาะหากคุณเรียกใช้การดำเนินการแบบไม่พร้อมกันหลายรายการ แบบขนาน releaseOnDeref ของ FirebaseServerAppSettings ช่วยให้กระบวนการนี้ง่ายขึ้น หากคุณกำหนด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 ด้วยโทเค็นรหัสการตรวจสอบสิทธิ์ ระบบจะ เปิดใช้การเชื่อมโยงเซสชันของผู้ใช้ที่ได้รับการตรวจสอบสิทธิ์ระหว่างสภาพแวดล้อมการแสดงผลฝั่งไคลเอ็นต์ (CSR) กับการแสดงผลฝั่งเซิร์ฟเวอร์ (SSR) อินสแตนซ์ของ Firebase Auth SDK ที่เริ่มต้นด้วยออบเจ็กต์ FirebaseServerApp ที่มีโทเค็นรหัส Auth จะพยายามลงชื่อเข้าใช้ผู้ใช้เมื่อเริ่มต้นโดยไม่ต้องให้แอปพลิเคชันเรียกใช้เมธอดการลงชื่อเข้าใช้ใดๆ

การระบุโทเค็นรหัสการให้สิทธิ์จะช่วยให้แอปใช้วิธีการลงชื่อเข้าใช้ของ 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.

ใช้ App Check ในสภาพแวดล้อม SSR

การบังคับใช้ App Check จะขึ้นอยู่กับอินสแตนซ์ App Check SDK ที่ Firebase SDK ใช้ เพื่อเรียก getToken ภายใน จากนั้นจะรวมโทเค็นที่ได้ไว้ในคำขอ ไปยังบริการ Firebase ทั้งหมด เพื่อให้แบ็กเอนด์ตรวจสอบแอปได้

อย่างไรก็ตาม เนื่องจาก SDK ของ App Check ต้องใช้เบราว์เซอร์เพื่อเข้าถึงฮิวริสติกที่เฉพาะเจาะจง สำหรับการตรวจสอบแอป จึงเริ่มต้นในสภาพแวดล้อมของเซิร์ฟเวอร์ไม่ได้

FirebaseServerApp เป็นทางเลือก หากมีการระบุโทเค็น App Check ที่ไคลเอ็นต์สร้างขึ้นในระหว่างFirebaseServerAppการเริ่มต้น SDK ของผลิตภัณฑ์ Firebase จะใช้โทเค็นดังกล่าวเมื่อเรียกใช้บริการ Firebase ซึ่งจะช่วยลดความจำเป็น ในการใช้อินสแตนซ์ 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.

ส่งโทเค็นไคลเอ็นต์ไปยังระยะการแสดงผลฝั่งเซิร์ฟเวอร์

หากต้องการส่งโทเค็นรหัสการตรวจสอบสิทธิ์ที่ได้รับการตรวจสอบสิทธิ์ (และโทเค็น App Check) จากไคลเอ็นต์ ไปยังเฟสการแสดงผลฝั่งเซิร์ฟเวอร์ (SSR) ให้ใช้ Service Worker แนวทางนี้เกี่ยวข้องกับการสกัดกั้นคำขอ Fetch ที่ทริกเกอร์ SSR และ การต่อโทเค็นเข้ากับส่วนหัวของคำขอ

ดูการใช้งานอ้างอิงของ Service Worker ของ Firebase Auth ได้ที่การจัดการเซสชันด้วย Service Worker ดูการเปลี่ยนแปลงฝั่งเซิร์ฟเวอร์ด้วย สำหรับโค้ดที่แสดงวิธีแยกวิเคราะห์โทเค็นเหล่านี้จากส่วนหัวเพื่อใช้ในการ เริ่มต้น FirebaseServerApp