ใช้การกําหนดค่าระยะไกลสําหรับการแสดงผลฝั่งเซิร์ฟเวอร์ในแอปพลิเคชันเว็บ

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