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

संग्रह की मदद से व्यवस्थित रहें अपनी प्राथमिकताओं के आधार पर, कॉन्टेंट को सेव करें और कैटगरी में बांटें.

ज़्यादा से ज़्यादा सुविधाएं देने के लिए, 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>
  );
}