在 Web 应用中使用 Remote Config 进行服务器端渲染

为了提供最大的灵活性，Firebase Remote Config 支持针对 Web 应用的客户端和服务器端 SDK 集成。这意味着您的应用可以：

• 在服务器上提取和评估 Remote Config 模板：您的服务器可以下载 Remote Config 模板并直接评估定位条件。
• 优化初始网页加载性能：对于服务器端渲染场景，服务器可以在初始网页加载期间向客户端提供评估的配置。这可以提前提供必要的配置数据，从而提高性能。

借助这种方法，您可以动态管理应用的行为和配置，尤其是在服务器端渲染设置中。

为应用设置服务器端渲染

如需在 Web 应用中使用 Remote Config 配置服务器端渲染，请按照以下步骤更新客户端和服务器应用。

第 1 步：更新服务器端应用

在您实现 Firebase Admin Node.js SDK 的服务器应用中，添加一个接受现有 ServerConfig 的 RemoteConfigFetchResponse 类。您可以使用它来序列化可传递给客户端的配置值。

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 配置选项以接受从服务器应用传递的序列化值。这会手动水合配置状态，而无需发出异步提取请求。

此外，您还必须添加初始化选项，以便您在客户端 SDK 中将 firebase-server 设置为 templateId。这样可将 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>
  );
}