एसएसआर (सर्वर साइड रेंडरिंग) की मदद से, डाइनैमिक वेब ऐप्लिकेशन में Firebase का इस्तेमाल करना

अगर आपने Firebase JS SDK या अन्य Firebase क्लाइंट SDK टूल के साथ काम किया है, तो आपको FirebaseApp इंटरफ़ेस के बारे में जानकारी होगी. साथ ही, आपको यह भी पता होगा कि ऐप्लिकेशन इंस्टेंस को कॉन्फ़िगर करने के लिए, इसका इस्तेमाल कैसे किया जाता है. सर्वर साइड पर इसी तरह के ऑपरेशन को आसान बनाने के लिए, Firebase FirebaseServerApp उपलब्ध कराता है.

FirebaseServerApp, FirebaseApp का एक वैरिएंट है. इसका इस्तेमाल सर्वर-साइड रेंडरिंग (एसएसआर) एनवायरमेंट में किया जाता है. इसमें क्लाइंट साइड रेंडरिंग (सीएसआर) / सर्वर-साइड रेंडरिंग के बीच Firebase सेशन जारी रखने के लिए टूल शामिल हैं. इन टूल और रणनीतियों की मदद से, Firebase से बनाए गए और Firebase App Hosting जैसे Google एनवायरमेंट में डिप्लॉय किए गए डाइनैमिक वेब ऐप्लिकेशन को बेहतर बनाया जा सकता है.

FirebaseServerApp का इस्तेमाल करके:

• उपयोगकर्ता के कॉन्टेक्स्ट में सर्वर-साइड कोड को लागू करना. यह Firebase Admin SDK से अलग है, जिसके पास एडमिन के सभी अधिकार होते हैं.
• एसएसआर एनवायरमेंट में App Check का इस्तेमाल चालू करें.
• क्लाइंट में बनाए गए Firebase Auth सेशन को जारी रखें.

FirebaseServerApp का लाइफ़साइकल

सर्वर-साइड रेंडरिंग (एसएसआर) फ़्रेमवर्क और अन्य नॉन-ब्राउज़र रनटाइम, जैसे कि क्लाउड वर्कर, शुरू होने में लगने वाले समय को ऑप्टिमाइज़ करते हैं. इसके लिए, वे कई बार लागू होने के दौरान संसाधनों का फिर से इस्तेमाल करते हैं. FirebaseServerApp को इस तरह से डिज़ाइन किया गया है कि यह रेफ़रंस काउंट मैकेनिज़्म का इस्तेमाल करके, इन एनवायरमेंट के साथ काम कर सके. अगर कोई ऐप्लिकेशन, पिछले initializeServerApp जैसे ही पैरामीटर के साथ initializeServerApp को शुरू करता है, तो उसे वही FirebaseServerApp इंस्टेंस मिलता है जो पहले से शुरू किया गया था. इससे, बेवजह के इनिशलाइज़ेशन ओवरहेड और मेमोरी के बंटवारे में कमी आती है. जब FirebaseServerApp इंस्टेंस पर deleteApp को शुरू किया जाता है, तो यह रेफ़रंस की संख्या को कम कर देता है. साथ ही, रेफ़रंस की संख्या शून्य होने के बाद, इंस्टेंस को खाली कर दिया जाता है.

FirebaseServerApp इंस्टेंस को मिटाया जा रहा है

यह जानना मुश्किल हो सकता है कि FirebaseServerApp इंस्टेंस पर deleteApp को कब कॉल करना है. खास तौर पर, तब जब एक साथ कई एसिंक्रोनस ऑपरेशन चल रहे हों. FirebaseServerAppSettings का releaseOnDeref फ़ील्ड, इसे आसान बनाने में मदद करता है. अगर आपने अनुरोध के स्कोप की लाइफ़स्पैन वाले किसी ऑब्जेक्ट को releaseOnDeref का रेफ़रंस असाइन किया है, तो फ़्रेमवर्क के हेडर ऑब्जेक्ट को वापस लेने पर, FirebaseServerApp अपने रेफ़रंस की संख्या कम कर देगा. उदाहरण के लिए, एसएसआर अनुरोध का हेडर ऑब्जेक्ट. इससे आपके FirebaseServerApp इंस्टेंस का स्टोरेज अपने-आप खाली हो जाता है.

ध्यान दें: FirebaseServerApp.releaseOnDeref वैल्यू का इस्तेमाल तब नहीं किया जाता, जब initializeServerApp एक जैसे कॉन्फ़िगरेशन वाले किसी मौजूदा FirebaseServerApp इंस्टेंस की जांच करता है.

यहां 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);
  ...
}

ध्यान दें: deleteApp() कॉल को releaseOnDeref से बनाए गए इंस्टेंस के साथ मिक्स करने से बचें. ऐसा न करने पर, ऐप्लिकेशन तय समय से पहले बंद हो सकते हैं.

क्लाइंट पर बनाए गए, पुष्टि किए गए सेशन फिर से शुरू करना

जब FirebaseServerApp के किसी इंस्टेंस को पुष्टि करने वाले आईडी टोकन के साथ शुरू किया जाता है, तो यह क्लाइंट-साइड रेंडरिंग (सीएसआर) और सर्वर-साइड रेंडरिंग (एसएसआर) एनवायरमेंट के बीच, पुष्टि किए गए उपयोगकर्ता सेशन को जोड़ने की सुविधा चालू करता है. Firebase Auth SDK के इंस्टेंस, FirebaseServerApp ऑब्जेक्ट के साथ शुरू किए जाते हैं. इस ऑब्जेक्ट में Auth आईडी टोकन होता है. यह टोकन, उपयोगकर्ता को शुरू करने पर साइन इन करने की कोशिश करेगा. इसके लिए, ऐप्लिकेशन को साइन इन करने के किसी भी तरीके को शुरू करने की ज़रूरत नहीं होगी.

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.

ध्यान दें: FirebaseServerApp की मदद से बनाए गए Auth इंस्टेंस, ऐसे ऑपरेशन के साथ काम नहीं करते जो मौजूदा उपयोगकर्ता को लॉग आउट करते हैं, नए उपयोगकर्ता को साइन इन करते हैं या मौजूदा उपयोगकर्ता को बदलते हैं. पुष्टि किए गए उपयोगकर्ता की स्थिति में होने वाले बदलाव, ब्राउज़र सेशन के हिसाब से होने चाहिए.

एसएसआर एनवायरमेंट में App Check का इस्तेमाल करना

App Check को लागू करने के लिए, App Check SDK टूल के इंस्टेंस का इस्तेमाल किया जाता है. Firebase SDK टूल, getToken को इंटरनल तौर पर कॉल करने के लिए, इस इंस्टेंस का इस्तेमाल करते हैं. इसके बाद, इस टोकन को Firebase की सभी सेवाओं के अनुरोधों में शामिल किया जाता है. इससे बैकएंड को ऐप्लिकेशन की पुष्टि करने की अनुमति मिलती है.

हालांकि, App Check SDK टूल को ऐप्लिकेशन की पुष्टि करने के लिए, कुछ खास ह्यूरिस्टिक को ऐक्सेस करना होता है. इसके लिए, उसे ब्राउज़र की ज़रूरत होती है. इसलिए, इसे सर्वर एनवायरमेंट में शुरू नहीं किया जा सकता.

FirebaseServerApp एक विकल्प उपलब्ध कराता है. अगर FirebaseServerApp को शुरू करने के दौरान, क्लाइंट से जनरेट किया गया App Check टोकन दिया जाता है, तो Firebase की सेवाओं को शुरू करते समय, Firebase के प्रॉडक्ट SDK टूल इसका इस्तेमाल करेंगे. इससे 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.

ध्यान दें: अगर समयसीमा खत्म होने या पार्स करने से जुड़ी गड़बड़ियों की वजह से, टोकन की स्थानीय पुष्टि नहीं हो पाती है, तो FirebaseServerApp इंस्टेंस को शुरू करते समय कंसोल में गड़बड़ी लॉग की जाती है.

क्लाइंट टोकन को सर्वर-साइड रेंडरिंग फ़ेज़ में पास करना

क्लाइंट से सर्वर-साइड रेंडरिंग (एसएसआर) फ़ेज़ में, पुष्टि किए गए Auth ID टोकन (और App Check टोकन) भेजने के लिए, सर्विस वर्कर का इस्तेमाल करें. इस तरीके में, एसएसआर को ट्रिगर करने वाले फ़ेच अनुरोधों को इंटरसेप्ट किया जाता है. साथ ही, अनुरोध के हेडर में टोकन जोड़े जाते हैं.

Firebase Auth सर्विस वर्कर को लागू करने के लिए, सर्विस वर्कर की मदद से सेशन मैनेज करना लेख पढ़ें. FirebaseServerApp को शुरू करने के लिए, हेडर से इन टोकन को पार्स करने का तरीका बताने वाले कोड के लिए, सर्वर साइड में किए गए बदलाव भी देखें.

सलाह: अनुरोध के हेडर में टोकन जोड़ने से पहले, सर्विस वर्कर में उन्हें रीफ़्रेश करना सबसे सही तरीका है. इससे यह पक्का होता है कि एसएसआर फ़ेज़ को अप-टू-डेट क्रेडेंशियल मिलें.

एसएसआर एनवायरमेंट में Firestore का इस्तेमाल करना

सर्वर-साइड रेंडरिंग (एसएसआर) की मदद से वेब ऐप्लिकेशन बनाते समय, आपको अक्सर सर्वर और क्लाइंट के बीच डेटा शेयर करना पड़ता है. इससे परफ़ॉर्मेंस और उपयोगकर्ता अनुभव को बेहतर बनाया जा सकता है. Firestore SDK टूल, सीरियलाइज़ेशन टूल उपलब्ध कराता है. इनकी मदद से, सर्वर पर स्नैपशॉट और खास तरह के डेटा को कैप्चर किया जा सकता है. साथ ही, उन्हें सीधे क्लाइंट-साइड कॉम्पोनेंट को भेजा जा सकता है. इस प्रोसेस से, क्लाइंट को एसएसआर फ़ेज़ के दौरान पहले से फ़ेच किए गए डेटा का इस्तेमाल करके, स्टेट को हाइड्रेट करने की सुविधा मिलती है. इससे, डेटा को बार-बार फ़ेच करने की ज़रूरत नहीं पड़ती. इसके अलावा, इन सीरियलाइज़ की गई स्थितियों से रीयल-टाइम लिसनर में ट्रांज़िशन किया जा सकता है. इससे यह पक्का किया जा सकता है कि आपका ऐप्लिकेशन, डेटाबेस के साथ सिंक रहे.

इस सेक्शन में, क्लाइंट-साइड कॉम्पोनेंट में सर्वर-साइड रेंडरिंग (एसएसआर) फ़ेज़ के दौरान वापस पाए गए डेटा को फिर से इस्तेमाल करने का तरीका बताया गया है.

डेटा टाइप को क्रम से लगाना

Firestore के कुछ डेटा टाइप, अपने डेटा को सीरियलाइज़ किए जा सकने वाले फ़ॉर्मैट में बदलने के लिए, toJSON तरीका उपलब्ध कराते हैं. इनमें Bytes, GeoPoint, Timestamp, और VectorValue जैसे ऑब्जेक्ट के इंस्टेंस शामिल हैं.

JSON फ़ॉर्मैट में डेटा मिलने के बाद, उसे स्टैंडर्ड फ़्रेमवर्क मैकेनिज़्म के ज़रिए सर्वर से क्लाइंट को भेजा जा सकता है. इसके अलावा, उसे उन कॉम्पोनेंट के पैरामीटर के तौर पर भी भेजा जा सकता है जो सर्वर और क्लाइंट के बीच की दूरी को कम करते हैं. उदाहरण के लिए:

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();

डेटा टाइप को डीसीरियलाइज़ करना

Firestore डेटा टाइप में स्टैटिक मेथड fromJSON शामिल है. इसका इस्तेमाल, सीरियलाइज़ किए गए डेटा को इस्तेमाल किए जा सकने वाले Firestore डेटा टाइप में बदलने के लिए किया जाता है.

उदाहरण के लिए, यहां Bytes डेटा टाइप को डीसीरियलाइज़ किया गया है:

import {
  Bytes
} from 'firebase/firestore';

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

Firestore स्नैपशॉट को सीरियलाइज़ और डीसीरियलाइज़ करना

Firestore डेटा टाइप की तरह ही, toJSON का इस्तेमाल करके DocumentSnapshot और QuerySnapshot के इंस्टेंस को सीरियलाइज़ किया जा सकता है. हालांकि, उन्हें डीसीरियलाइज़ करने के लिए, आपको स्टैटिक fromJSON तरीके के बजाय, स्टैंडअलोन फ़ंक्शन documentSnapshotFromJSON और querySnapshotFromJSON का इस्तेमाल करना होगा.

उदाहरण के लिए, toJSON तरीके का इस्तेमाल करके, query कार्रवाई के querySnapshot नतीजों को क्रम से लगाया जा सकता है:

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();

इसके बाद, इस डेटा को डीसीरियलाइज़ किया जा सकता है:

import {
  querySnapshotFromJSON
} from 'firebase/firestore';

// deserializedSnapshot is an object of type QuerySnapshot:

const deserializedSnapshot =
  querySnapshotFromJSON(firestore, querySnapshotJson);

सीरियलाइज़्ड स्नैपशॉट वाले लिसनर

एसएसआर फ़ेज़ के दौरान क्वेरी किया गया डेटा, आपके शुरुआती सीएसआर रेंडर के लिए अहम होता है. हालांकि, आपको उस जानकारी के रीयल-टाइम अपडेट के लिए, Firestore सेवा को मॉनिटर करना पड़ सकता है.

अगर आपके ऐप्लिकेशन को रीयल-टाइम में अपडेट की ज़रूरत है, तो onSnapshotResume फ़ंक्शन का इस्तेमाल करके, सीरियलाइज़ किए गए Snapshot डेटा के साथ Firestore SnapshotListener को शुरू किया जा सकता है. उदाहरण के लिए:

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);

ध्यान दें: जब onSnapshotResume के ज़रिए स्नैपशॉट लोड किया जाता है, तो डीसीरियलाइज़ किया गया यह डेटा, क्वेरी के लोकल कैश मेमोरी में तुरंत अपडेट नहीं होता. इसके बजाय, कैश मेमोरी को ऐक्टिव लिसनर के ज़रिए होने वाले किसी भी अपडेट से मैनेज किया जाता है.