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

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