Menggunakan Firebase di aplikasi web dinamis dengan SSR (Rendering sisi Server)

Jika pernah menggunakan Firebase JS SDK atau SDK klien Firebase lainnya, Anda mungkin sudah terbiasa dengan cara penggunaan dan antarmuka FirebaseApp untuk mengonfigurasi instance aplikasi. Untuk memfasilitasi operasi serupa di sisi server, Firebase menyediakan FirebaseServerApp.

FirebaseServerApp adalah varian dari FirebaseApp yang dapat digunakan di lingkungan rendering sisi server (SSR). Hal ini meliputi alat untuk melanjutkan sesi Firebase yang mencakup pemisahan rendering sisi klien (CSR)/rendering sisi server. Alat dan strategi ini dapat membantu meningkatkan aplikasi web dinamis yang dibuat dengan Firebase dan di-deploy di lingkungan Google seperti Firebase App Hosting.

Gunakan FirebaseServerApp untuk:

  • Menjalankan kode sisi server dalam konteks pengguna, berbeda dengan Firebase Admin SDK yang memiliki hak administrasi penuh.
  • Mengaktifkan penggunaan App Check di lingkungan SSR.
  • Melanjutkan sesi Firebase Auth yang dibuat di klien.

Siklus proses FirebaseServerApp

Framework rendering sisi server (SSR) dan runtime non-browser lainnya seperti pekerja cloud mengoptimalkan waktu inisialisasi dengan menggunakan kembali resource di beberapa eksekusi. FirebaseServerApp dirancang untuk mengakomodasi lingkungan ini dengan menggunakan mekanisme jumlah referensi. Jika aplikasi memanggil initializeServerApp dengan parameter yang sama seperti initializeServerApp sebelumnya, aplikasi akan menerima instance FirebaseServerApp yang sama yang telah diinisialisasi. Hal ini akan mengurangi overhead inisialisasi dan alokasi memori yang tidak perlu. Saat dipanggil pada instance FirebaseServerApp, deleteApp akan mengurangi jumlah referensi, dan instance akan dikosongkan setelah jumlah referensi mencapai nol.

Membersihkan instance FirebaseServerApp

Sulit untuk mengetahui kapan harus memanggil deleteApp pada instance FirebaseServerApp, terutama jika Anda menjalankan banyak operasi asinkron secara paralel. Kolom releaseOnDeref dari FirebaseServerAppSettings membantu menyederhanakan hal ini. Jika Anda menetapkan releaseOnDeref referensi ke objek dengan masa aktif cakupan permintaan (misalnya, objek header permintaan SSR), FirebaseServerApp akan mengurangi jumlah referensinya saat framework mengklaim kembali objek header. Tindakan ini akan otomatis membersihkan instance FirebaseServerApp Anda.

Berikut adalah contoh penggunaan 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);
  ...
}

Melanjutkan sesi yang diautentikasi yang dibuat di klien

Saat instance FirebaseServerApp diinisialisasi dengan token ID Auth, instance tersebut akan memungkinkan penjembatanan sesi pengguna yang diautentikasi antara lingkungan rendering sisi klien (CSR) dan rendering sisi server (SSR). Instance Firebase Auth SDK yang diinisialisasi dengan objek FirebaseServerApp yang berisi token Auth ID akan mencoba memproses login pengguna saat melakukan inisialisasi tanpa perlu pemanggilan metode login apa pun dari aplikasi.

Dengan memberikan token ID Auth, aplikasi dapat menggunakan metode login Auth apa pun di klien, sehingga memastikan sesi berlanjut di sisi server, bahkan untuk metode login yang memerlukan interaksi pengguna. Selain itu, fitur ini memungkinkan pemindahan operasi intensif ke server seperti kueri Firestore yang diautentikasi, yang akan meningkatkan performa rendering aplikasi Anda.

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

Menggunakan App Check di lingkungan SSR

Penerapan App Check bergantung pada instance App Check SDK yang digunakan Firebase SDK untuk memanggil getToken secara internal. Token yang dihasilkan kemudian disertakan dalam permintaan ke semua layanan Firebase, sehingga backend dapat memvalidasi aplikasi.

Namun, karena App Check SDK memerlukan browser guna mengakses heuristik tertentu untuk memvalidasi aplikasi, SDK ini tidak dapat diinisialisasi di lingkungan server.

FirebaseServerApp memberikan cara alternatif. Jika token App Check yang dihasilkan klien disediakan selama inisialisasi FirebaseServerApp, token tersebut akan digunakan oleh SDK produk Firebase saat memanggil layanan Firebase, sehingga instance SDK App Check tidak lagi diperlukan.

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

Meneruskan token klien ke fase rendering sisi server

Untuk mengirimkan token ID Auth yang diautentikasi (dan token App Check) dari klien ke fase rendering sisi server (SSR), gunakan service worker. Pendekatan ini melibatkan intersepsi permintaan pengambilan yang memicu SSR dan menambahkan token ke header permintaan.

Baca Pengelolaan sesi dengan service worker untuk mengetahui implementasi referensi service worker Firebase Auth. Lihat juga Perubahan sisi server untuk kode yang menunjukkan cara mengurai token ini dari header agar dapat digunakan dalam inisialisasi FirebaseServerApp.