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

Nếu đã từng làm việc với Firebase JS SDK hoặc các SDK ứng dụng khác của Firebase, có thể bạn đã 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 phiên bản ứ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). Thư viện này bao gồm các công cụ để tiếp tục phiên Firebase bao gồm cả việc phân chia kết xuất phía máy khách (CSR) / kết xuất phía máy chủ. Những công cụ và chiến lược này có thể giúp cải thiện các ứng dụng web động được xây dựng 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 bối cảnh người dùng, trái ngược với SDK của Firebase dành cho quản trị viên 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 Firebase Auth được tạo trong ứng dụng.

Vòng đời của FirebaseServerApp

Khung kết xuất phía máy chủ (SSR) và các môi trường thời gian chạy khác không phải trình duyệt (chẳng hạn như trình chạy đá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 trong nhiều lần thực thi. FirebaseServerApp được thiết kế để phù hợp với những 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 như initializeServerApp trước đó, thì ứng dụng sẽ nhận được cùng một thực thể FirebaseServerApp đã được khởi chạy. Điều này giúp giảm mức hao tổn khởi chạy không cần thiết và phân bổ bộ nhớ. Khi deleteApp được gọi trên một thực thể FirebaseServerApp, nó sẽ giảm số lượng tham chiếu và thực thể được giải phóng sau khi số lượng tham chiếu đạt đến 0.

Đang dọn dẹp FirebaseServerApp thực thể

Có thể khó 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 hoạt động 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 gán releaseOnDeref một tham chiếu đến một đối tượng có vòng đời trong phạm vi của 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ượng tham chiếu khi khung thu hồi đối tượng tiêu đề. Thao tác này sẽ tự động dọn dẹp thực thể FirebaseServerApp của bạn.

Lưu ý: Giá trị FirebaseServerApp.releaseOnDeref không được 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();
  let appSettings: FirebaseServerAppSettings = {};
  appSettings.releaseOnDeref = headersObj;
  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, các ứ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 chạy bằng mã thông báo mã xác thực, thực thể đó 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 Firebase Auth được khởi chạy bằng đối tượng FirebaseServerApp chứa mã thông báo nhận dạng xác thực 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 xác thực cho phép các ứ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 những 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 còn cho phép giảm tải các thao tác chuyên sâu cho máy chủ, chẳng hạn như truy vấn Firestore đã xác thực, nhờ đó 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 Kiểm tra ứng dụng dựa vào một thực thể SDK Kiểm tra ứng dụng mà Firebase SDK 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 đến tất cả dịch vụ của 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 có trình duyệt để truy cập vào các phương pháp phỏng đoán cụ thể nhằm xác thực ứng dụng, nên bạn không thể khởi chạy SDK này trong môi trường máy chủ.

FirebaseServerApp là 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 khách tạo được cung cấp trong quá trình khởi chạy FirebaseServerApp, thì SDK sản phẩm Firebase sẽ sử dụng mã thông báo đó khi gọi các dịch vụ Firebase, nhờ đó không cần đến 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 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 chạy thực thể FirebaseServerApp.

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

Để truyền mã thông báo Mã xác thực đã xác thực (và mã thông báo Kiểm tra ứng dụng) từ ứng dụng khách sang giai đoạn kết xuất phía máy chủ (SSR), hãy sử dụng một 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 đề của yêu cầu.

Hãy tham khảo bài viết 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 chạy FirebaseServerApp.

Mẹo: Làm mới mã thông báo trong trình chạy dịch vụ trước khi thêm mã thông báo vào tiêu đề của yêu cầu là một 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.

Sử dụng Firestore trong môi trường SSR

Khi xây dựng ứng dụng web bằng tính năng Kết xuất phía máy chủ (SSR), bạn thường cần chia sẻ dữ liệu giữa máy chủ và máy khách để tối ưu hoá hiệu suất và trải nghiệm người dùng. Firestore SDK cung cấp các công cụ chuyển đổi tuần tự cho phép bạn chụp nhanh và thu thập các loại dữ liệu cụ thể trên máy chủ rồi truyền trực tiếp đến các thành phần phía máy khách. Quá trình này giúp loại bỏ các lần tìm nạp thừa bằng cách cho phép ứng dụng khách bổ sung trạng thái bằng dữ liệu được tìm nạp trước trong giai đoạn SSR. Ngoài ra, bạn có thể chuyển đổi từ các trạng thái được chuyển đổi tuần tự này sang trình nghe theo thời gian thực, đảm bảo ứng dụng của bạn luôn đồng bộ hoá với cơ sở dữ liệu.

Phần này mô tả cách sử dụng lại dữ liệu được truy xuất trong giai đoạn kết xuất phía máy chủ (SSR) trong các thành phần phía máy khách.

Tuần tự hoá các loại dữ liệu

Một số loại dữ liệu Firestore cung cấp phương thức toJSON để chuyển đổi dữ liệu của chúng thành định dạng có thể chuyển đổi tuần tự. Các đối tượng này bao gồm các thực thể của đối tượng như Bytes, GeoPoint, Timestamp và VectorValue.

Sau khi có dữ liệu ở định dạng JSON, bạn có thể truyền dữ liệu đó từ máy chủ đến ứng dụng thông qua các cơ chế khung tiêu chuẩn hoặc dưới dạng tham số cho các thành phần trải dài trên dải phân cách. Ví dụ:

import {
  Bytes
} from 'firebase/firestore';

const BYTES_DATA = new Uint8Array([0, 1, 2, 3, 4, 5]);
const bytes = Bytes.fromUint8Array(BYTES_DATA);
const bytesJSON = bytes.toJSON();

Kiểu dữ liệu giải tuần tự hoá

Các loại dữ liệu Firestore bao gồm phương thức tĩnh fromJSON để chuyển đổi dữ liệu được chuyển đổi tuần tự thành loại dữ liệu Firestore có thể hoạt động.

Ví dụ: đoạn mã sau đây giải tuần tự hoá một loại dữ liệu Bytes:

import {
  Bytes
} from 'firebase/firestore';

// Assuming the same `bytesJSON` variable from the previous example.
const deserializedBytes = Bytes.fromJSON(bytesJSON);

Tuần tự hoá và giải tuần tự hoá Ảnh chụp nhanh Firestore

Tương tự như các loại dữ liệu Firestore, bạn có thể chuyển đổi tuần tự các thực thể của DocumentSnapshot và QuerySnapshot bằng toJSON. Tuy nhiên, để giải tuần tự hoá, bạn phải sử dụng các hàm độc lập documentSnapshotFromJSON và querySnapshotFromJSON thay vì phương thức fromJSON tĩnh.

Ví dụ: kết quả querySnapshot của một thao tác query có thể được chuyển đổi tuần tự bằng phương thức toJSON:

import {
  collection,
  getDocs,
  query,
  querySnapshotFromJSON
} from 'firebase/firestore';
// Assuming a configured instance of Firestore in the variable `firestore`.
const queryRef = query(collection(firestore, QUERY_PATH));
const querySnapshot = await getDocs(queryRef);
const querySnapshotJson = querySnapshot.toJSON();

Sau đó, dữ liệu này có thể được giải tuần tự hoá:

import {
  querySnapshotFromJSON
} from 'firebase/firestore';

// deserializedSnapshot is an object of type QuerySnapshot:

const deserializedSnapshot =
  querySnapshotFromJSON(firestore, querySnapshotJson);

Trình nghe có ảnh chụp nhanh được chuyển đổi tuần tự

Mặc dù dữ liệu được truy vấn trong giai đoạn SSR có giá trị cho quá trình kết xuất CSR ban đầu, nhưng bạn vẫn có thể cần theo dõi dịch vụ Firestore để biết thông tin cập nhật theo thời gian thực về thông tin đó.

Nếu ứng dụng của bạn yêu cầu các bản cập nhật theo thời gian thực này, bạn có thể sử dụng hàm onSnapshotResume để khởi chạy SnapshotListener của Firestore bằng dữ liệu Snapshot được chuyển đổi tuần tự. Ví dụ:

const observer = {
  next: (qs) => {
    console.log("onSnapshot invoked: ", qs.data());
  },
  error: (e) => {
    console.log("error callback invoked: ", e.toString());
  }
};
const unsubscribe = onSnapshotResume(firestore, querySnapshotJson, observer);

Lưu ý: Khi ảnh chụp nhanh được tải qua onSnapshotResume, dữ liệu đã giải tuần tự này không được cập nhật ngay lập tức vào bộ nhớ đệm cục bộ của truy vấn. Thay vào đó, bộ nhớ đệm được duy trì bằng mọi bản cập nhật tiếp theo xảy ra thông qua trình nghe đang hoạt động.