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

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