Sử dụng Firebase trong các ứng dụng web động có SSR (Hiển thị phía máy chủ)

Nếu đã làm việc với SDK Firebase JS hoặc các SDK ứng dụng Firebase khác, bạn có thể quen thuộc với giao diện FirebaseApp và cách sử dụng giao diện này để định cấu hình các thực thể ứng dụng. Để hỗ trợ các thao tác tương tự ở phía máy chủ, Firebase cung cấp FirebaseServerApp.

FirebaseServerApp là một biến thể của FirebaseApp để sử dụng trong môi trường kết xuất phía máy chủ (SSR). Công cụ này bao gồm các công cụ để tiếp tục các phiên Firebase trên nhiều nền tảng kết xuất phía máy khách (CSR) / kết xuất phía máy chủ. Các công cụ và chiến lược này có thể giúp nâng cao ứng dụng web động được tạo bằng Firebase và triển khai trong các môi trường của Google như Firebase App Hosting.

Sử dụng FirebaseServerApp để:

• Thực thi mã phía máy chủ trong ngữ cảnh người dùng, trái ngược với SDK Quản trị Firebase có toàn quyền quản trị.
• Bật tính năng Kiểm tra ứng dụng trong môi trường SSR.
• Tiếp tục phiên Xác thực Firebase đã tạo trong ứng dụng.

Vòng đời của FirebaseServerApp

Các khung kết xuất phía máy chủ (SSR) và các môi trường thời gian chạy không phải trình duyệt khác như trình chạy trên đám mây tối ưu hoá thời gian khởi chạy bằng cách sử dụng lại tài nguyên trên nhiều lần thực thi. FirebaseServerApp được thiết kế để phù hợp với các môi trường này bằng cách sử dụng cơ chế đếm tham chiếu. Nếu một ứng dụng gọi initializeServerApp bằng các tham số giống với initializeServerApp trước đó, thì ứng dụng đó sẽ nhận được cùng một thực thể FirebaseServerApp đã được khởi tạo. Điều này giúp giảm chi phí khởi tạo và phân bổ bộ nhớ không cần thiết. Khi deleteApp được gọi trên một thực thể FirebaseServerApp, thực thể này sẽ giảm số lượt tham chiếu và được giải phóng sau khi số lượt tham chiếu đạt đến 0.

Dọn dẹp các thực thể FirebaseServerApp

Bạn có thể gặp khó khăn khi biết thời điểm gọi deleteApp trên một thực thể FirebaseServerApp, đặc biệt là nếu bạn đang chạy nhiều thao tác không đồng bộ song song. Trường releaseOnDeref của FirebaseServerAppSettings giúp đơn giản hoá việc này. Nếu bạn chỉ định releaseOnDeref tham chiếu đến một đối tượng có thời gian tồn tại của phạm vi yêu cầu (ví dụ: đối tượng tiêu đề của yêu cầu SSR), thì FirebaseServerApp sẽ giảm số lượt tham chiếu khi khung lấy lại đối tượng tiêu đề. Thao tác này sẽ tự động dọn dẹp thực thể FirebaseServerApp.

Lưu ý: Giá trị FirebaseServerApp.releaseOnDeref không được sử dụng khi initializeServerApp kiểm tra một thực thể FirebaseServerApp hiện có có cấu hình giống hệt.

Sau đây là ví dụ về cách sử dụng 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);
  ...
}

Lưu ý: Tránh kết hợp các lệnh gọi deleteApp() với các thực thể được tạo bằng releaseOnDeref; nếu không, ứng dụng có thể bị huỷ sớm hơn dự kiến.

Tiếp tục các phiên đã xác thực được tạo trên ứng dụng

Khi một thực thể của FirebaseServerApp được khởi tạo bằng mã thông báo Auth ID, thực thể này sẽ cho phép kết nối các phiên người dùng đã xác thực giữa môi trường kết xuất phía máy khách (CSR) và môi trường kết xuất phía máy chủ (SSR). Các thực thể của SDK Xác thực Firebase được khởi chạy bằng đối tượng FirebaseServerApp chứa mã thông báo Auth ID sẽ cố gắng đăng nhập người dùng khi khởi chạy mà không cần ứng dụng gọi bất kỳ phương thức đăng nhập nào.

Việc cung cấp mã thông báo mã nhận dạng Auth cho phép ứng dụng sử dụng bất kỳ phương thức đăng nhập nào của Auth trên ứng dụng, đảm bảo rằng phiên tiếp tục ở phía máy chủ, ngay cả đối với các phương thức đăng nhập yêu cầu người dùng tương tác. Ngoài ra, tính năng này cho phép chuyển các hoạt động chuyên sâu sang máy chủ, chẳng hạn như các truy vấn Firestore đã xác thực, giúp cải thiện hiệu suất kết xuất của ứng dụng.

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

Lưu ý: Các thực thể xác thực được tạo bằng FirebaseServerApp không hỗ trợ các thao tác đăng xuất người dùng hiện tại, đăng nhập người dùng mới hoặc thay thế người dùng hiện tại. Các thay đổi đối với trạng thái người dùng Auth phải do phiên trình duyệt điều khiển.

Sử dụng tính năng Kiểm tra ứng dụng trong môi trường SSR

Việc thực thi tính năng Kiểm tra ứng dụng dựa vào một thực thể SDK Kiểm tra ứng dụng mà các SDK Firebase sử dụng để gọi getToken trong nội bộ. Sau đó, mã thông báo thu được sẽ được đưa vào các yêu cầu cho tất cả dịch vụ Firebase, cho phép phần phụ trợ xác thực ứng dụng.

Tuy nhiên, vì SDK Kiểm tra ứng dụng cần một trình duyệt để truy cập vào các phương pháp phỏng đoán cụ thể cho việc xác thực ứng dụng, nên không thể khởi chạy SDK này trong môi trường máy chủ.

FirebaseServerApp cung cấp một giải pháp thay thế. Nếu mã thông báo Kiểm tra ứng dụng do ứng dụng tạo được cung cấp trong quá trình khởi chạy FirebaseServerApp, thì mã thông báo này sẽ được các SDK sản phẩm Firebase sử dụng khi gọi các dịch vụ Firebase, nhờ đó, bạn không cần phải tạo một thực thể SDK Kiểm tra ứng dụng.

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

Lưu ý: Nếu mã thông báo không xác minh được cục bộ do lỗi hết hạn hoặc lỗi phân tích cú pháp, thì lỗi bảng điều khiển sẽ được ghi lại tại thời điểm khởi tạo thực thể FirebaseServerApp.

Truyền mã thông báo ứng dụng đến giai đoạn kết xuất phía máy chủ

Để truyền mã thông báo Auth ID (và mã thông báo App Check) đã xác thực từ ứng dụng khách đến giai đoạn kết xuất phía máy chủ (SSR), hãy sử dụng trình chạy dịch vụ. Phương pháp này bao gồm việc chặn các yêu cầu tìm nạp kích hoạt SSR và thêm mã thông báo vào tiêu đề yêu cầu.

Hãy tham khảo phần Quản lý phiên bằng trình chạy dịch vụ để biết cách triển khai tham chiếu của trình chạy dịch vụ Firebase Auth. Ngoài ra, hãy xem phần Thay đổi phía máy chủ để biết mã minh hoạ cách phân tích cú pháp các mã thông báo này từ tiêu đề để sử dụng trong quá trình khởi tạo FirebaseServerApp.

Mẹo: Làm mới mã thông báo trong worker dịch vụ trước khi thêm các mã thông báo đó vào tiêu đề yêu cầu là phương pháp hay nhất để đảm bảo giai đoạn SSR nhận được thông tin xác thực mới nhất.