웹 애플리케이션에서 서버 측 렌더링에 원격 구성 사용

최대한의 유연성을 제공하기 위해 Firebase Remote Config은 웹 애플리케이션의 클라이언트 측 SDK 통합과 서버 측 SDK 통합을 모두 지원합니다. 즉, 앱에서 다음과 같은 작업을 할 수 있습니다.

  • 서버에서 Remote Config 템플릿 가져오기 및 평가: 서버에서 Remote Config 템플릿을 다운로드하고 타겟팅 조건을 직접 평가할 수 있습니다.
  • 초기 페이지 로드 성능 최적화: 서버 측 렌더링 시나리오의 경우 서버는 초기 페이지 로드 중에 평가된 구성을 클라이언트에 제공할 수 있습니다. 이렇게 하면 필요한 구성 데이터를 미리 전송하여 성능이 개선됩니다.

이 접근 방식을 사용하면 특히 서버 측 렌더링 설정에서 앱의 동작과 구성을 동적으로 관리할 수 있습니다.

앱의 서버 측 렌더링 설정

웹 앱에서 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>
  );
}