استخدام ميزة "الإعداد عن بُعد" للعرض من جهة الخادم في تطبيقات الويب

لتوفير أقصى قدر من المرونة، تتيح خدمة "الإعداد عن بُعد من Firebase" Remote Config عمليات دمج حزم تطوير البرامج (SDK) من جهة العميل ومن جهة الخادم لتطبيقات الويب. وهذا يعني أنّ تطبيقك يمكنه تنفيذ ما يلي:

  • جلب نماذج Remote Config وتقييمها على خادمك: يمكن لخادمك تنزيل نموذج Remote Config وتقييم شروط الاستهداف مباشرةً.
  • تحسين أداء تحميل الصفحة الأوّلي: في سيناريوهات العرض من جهة الخادم، يمكن للخادم تزويد العميل بالإعداد الذي تم تقييمه أثناء تحميل الصفحة الأوّلي. يؤدي ذلك إلى تحسين الأداء من خلال تقديم بيانات الإعداد الضرورية مسبقًا.

يمنحك هذا النهج إمكانية إدارة سلوك تطبيقك وإعداده بشكلٍ ديناميكي، لا سيّما في عمليات الإعداد التي تتضمّن العرض من جهة الخادم.

إعداد العرض من جهة الخادم لتطبيقاتك

لضبط العرض من جهة الخادم باستخدام Remote Config في تطبيق الويب، عليك تعديل تطبيقات العميل والخادم باستخدام الخطوات التالية.

الخطوة 1: تعديل تطبيقك من جهة الخادم

في تطبيق الخادم الذي نفّذت فيه حزمة 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>
  );
}

الخطوة 2: تعديل تطبيق العميل

في تطبيق العميل الذي ينفّذ حزمة Firebase Javascript SDK، عليك تضمين خيار الإعداد initialFetchResponse لقبول القيم المتسلسلة التي يتم تمريرها من تطبيق الخادم. يؤدي ذلك إلى ملء حالة الإعداد يدويًا بدون تقديم طلب جلب غير متزامن.

بالإضافة إلى ذلك، عليك تضمين خيار إعداد يتيح لك ضبط firebase-server كـ templateId في حزمة SDK من جهة العميل. يؤدي ذلك إلى ضبط حزمة 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>
  );
}