वेब ऐप्लिकेशन में सर्वर साइड रेंडरिंग के लिए, रिमोट कॉन्फ़िगरेशन का इस्तेमाल करना

ज़्यादा से ज़्यादा फ़्लेक्सिबिलिटी देने के लिए, Firebase Remote Config वेब ऐप्लिकेशन के लिए क्लाइंट-साइड और सर्वर-साइड, दोनों तरह के SDK इंटिग्रेशन की सुविधा देता है. इसका मतलब है कि आपका ऐप्लिकेशन:

  • अपने सर्वर पर Remote Config टेंप्लेट फ़ेच और उनका आकलन करें: आपका सर्वर, Remote Config टेंप्लेट डाउनलोड कर सकता है और सीधे टारगेटिंग की शर्तों का आकलन कर सकता है.
  • शुरुआती पेज लोड की परफ़ॉर्मेंस को ऑप्टिमाइज़ कर सकता है: सर्वर-साइड रेंडरिंग के लिए, सर्वर शुरुआती पेज लोड के दौरान, क्लाइंट को आकलन किया गया कॉन्फ़िगरेशन दे सकता है. इससे, ज़रूरी कॉन्फ़िगरेशन डेटा को पहले से उपलब्ध कराकर, परफ़ॉर्मेंस को बेहतर बनाया जा सकता है.

इस तरीके से, अपने ऐप्लिकेशन के व्यवहार और कॉन्फ़िगरेशन को डाइनैमिक तरीके से मैनेज किया जा सकता है. खास तौर पर, सर्वर-साइड रेंडरिंग सेटअप में.

अपने ऐप्लिकेशन के लिए, सर्वर-साइड रेंडरिंग सेट अप करना

अपने वेब ऐप्लिकेशन में Remote Config के साथ सर्वर-साइड रेंडरिंग को कॉन्फ़िगर करने के लिए, यहां दिए गए तरीके का इस्तेमाल करके, अपने क्लाइंट और सर्वर ऐप्लिकेशन को अपडेट करें.

पहला चरण: अपने सर्वर-साइड ऐप्लिकेशन को अपडेट करना

अपने सर्वर ऐप्लिकेशन में, जहां आपने Firebase Admin Node.js SDK टूल लागू किया है, वहां RemoteConfigFetchResponse क्लास शामिल करें. यह मौजूदा ServerConfig को स्वीकार करती है. इसका इस्तेमाल, कॉन्फ़िगरेशन की उन वैल्यू को क्रम से लगाने के लिए किया जा सकता है जिन्हें आपके क्लाइंट को पास किया जा सकता है.


export default async function MyServerComponent() {
  const serverApp = initializeApp();
  const serverSideConfig = getRemoteConfig(serverApp);
  const template = await serverSideConfig.getServerTemplate();
  const config = template.evaluate({randomizationId: 'some-uuid'});
  const fetchResponse = new RemoteConfigFetchResponse(serverApp, config);

  return (
    <div>
      <MyClientComponent initialFetchResponse={fetchResponse}></MyClientComponent>
    </div>
  );
}

दूसरा चरण: अपने क्लाइंट ऐप्लिकेशन को अपडेट करना

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

इसके अलावा, आपको एक ऐसा शुरुआती विकल्प शामिल करना होगा जिससे क्लाइंट SDK टूल पर firebase-server को templateId के तौर पर सेट किया जा सके. इससे, SDK टूल को बाद में फ़ेच करने के लिए, शुरुआती सर्वर-साइड टेंप्लेट का इस्तेमाल करने के लिए कॉन्फ़िगर किया जाता है. इससे, क्लाइंट और सर्वर के बीच पैरामीटर और शर्तों के हिसाब से वैल्यू में एकरूपता बनी रहती है.


export default function MyClientComponent({initialFetchResponse= ''} = {}) {
  const app = initializeApp(firebaseConfig);
  const config = getRemoteConfig(app, {
        templateId: 'firebase-server',
        initialFetchResponse
  });
  const paramValue = getString(config, 'my_rc_parameter_key');

  return (
    <div>{paramValue}</div>
  );
}