Sử dụng Cấu hình từ xa để hiển thị phía máy chủ trong ứng dụng web

Để mang lại sự linh hoạt tối đa, Firebase Remote Config hỗ trợ cả việc tích hợp SDK phía máy khách và phía máy chủ cho các ứng dụng web. Điều này có nghĩa là ứng dụng của bạn có thể:

  • Tìm nạp và đánh giá mẫu Remote Config trên máy chủ: Máy chủ của bạn có thể tải mẫu Remote Config xuống và đánh giá trực tiếp các điều kiện nhắm mục tiêu.
  • Tối ưu hoá hiệu suất tải trang ban đầu: Đối với các trường hợp kết xuất phía máy chủ, máy chủ có thể cung cấp cấu hình đã đánh giá cho ứng dụng trong quá trình tải trang ban đầu. Điều này giúp cải thiện hiệu suất bằng cách phân phối trước dữ liệu cấu hình cần thiết.

Phương pháp này giúp bạn có thể linh động quản lý hành vi và cấu hình của ứng dụng, đặc biệt là trong các chế độ thiết lập kết xuất phía máy chủ.

Thiết lập tính năng hiển thị phía máy chủ cho ứng dụng

Để định cấu hình tính năng kết xuất phía máy chủ bằng Remote Config trong ứng dụng web, hãy cập nhật ứng dụng máy khách và máy chủ bằng các bước sau.

Bước 1: Cập nhật ứng dụng phía máy chủ

Trong ứng dụng máy chủ, nơi bạn đã triển khai SDK Node.js của Quản trị viên Firebase, hãy thêm một lớp RemoteConfigFetchResponse chấp nhận ServerConfig hiện có. Bạn có thể sử dụng phương thức này để chuyển đổi tuần tự các giá trị cấu hình có thể được truyền đến ứng dụng của mình.


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

Bước 2: Cập nhật ứng dụng khách

Trên ứng dụng khách triển khai SDK JavaScript Firebase, hãy thêm tuỳ chọn cấu hình initialFetchResponse để chấp nhận các giá trị được chuyển đổi tuần tự được truyền từ ứng dụng máy chủ. Thao tác này sẽ tự động làm mới trạng thái cấu hình mà không cần tạo yêu cầu tìm nạp không đồng bộ.

Ngoài ra, bạn phải thêm một tuỳ chọn khởi chạy cho phép bạn đặt firebase-server làm templateId trên SDK ứng dụng. Thao tác này sẽ định cấu hình SDK để sử dụng mẫu phía máy chủ ban đầu cho các lần tìm nạp tiếp theo, đảm bảo các tham số và giá trị có điều kiện nhất quán giữa ứng dụng và máy chủ.


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