Para oferecer o máximo de flexibilidade, o Remote Config do Firebase oferece suporte a integrações de SDK do lado do cliente e do servidor para aplicativos da Web. Isso significa que seu app pode:
- Buscar e avaliar modelos Remote Config no servidor: o servidor pode fazer o download do modelo Remote Config e avaliar as condições de segmentação diretamente.
- Otimizar a performance do carregamento inicial da página: em cenários de renderização no servidor, o servidor pode fornecer a configuração avaliada ao cliente durante o carregamento inicial da página. Isso melhora o desempenho ao fornecer os dados de configuração necessários com antecedência.
Essa abordagem permite gerenciar o comportamento e a configuração do app de forma dinâmica, principalmente em configurações de renderização do lado do servidor.
Configurar a renderização pelo servidor para seus apps
Para configurar a renderização do lado do servidor com Remote Config no seu app da Web, atualize os apps cliente e do servidor usando as etapas a seguir.
Etapa 1: atualizar o aplicativo do lado do servidor
No app do servidor, onde você implementou o SDK Admin para Node.js do Firebase, inclua uma classe RemoteConfigFetchResponse que aceite o
ServerConfig
existente. Você pode usar isso para serializar valores de configuração que podem ser transmitidos ao cliente.
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>
);
}
Etapa 2: atualizar o app cliente
No app cliente, que implementa o SDK do Firebase para JavaScript, inclua uma
opção de configuração initialFetchResponse para aceitar os valores serializados
transmitidos pelo app do servidor. Isso hidrata manualmente o estado de configuração sem
fazer uma solicitação de busca assíncrona.
Além disso, é necessário incluir uma opção de inicialização que permita definir o
firebase-server como templateId no SDK do cliente. Isso configura o SDK
para usar o modelo inicial do lado do servidor para buscas subsequentes, garantindo
parâmetros consistentes e valores condicionais entre cliente e servidor.
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>
);
}