Implementar testes A/B em aplicações React (especialmente Next.js) usando soluções tradicionais geralmente leva a uma experiência de usuário terrível: a página pisca com o conteúdo antigo antes de carregar o novo. Esse fenômeno é o flicker effect.
Se você procura por ab testing nextjs ou lida com requisições usando feature flag nextjs, você sabe que fazer ab test sem flicker é o Santo Graal do desenvolvimento front-end moderno.
Neste artigo, veremos como resolver isso combinando SSR (Server-Side Rendering) ou Edge Computing com o middleware do Next.js.
Por que o Flicker Ocorre no Next.js?
Quando você usa bibliotecas baseadas apenas no Client-side, o ciclo de vida do carregamento é:
- O HTML inicial chega ao usuário (Variante A).
- O React hidrata a aplicação.
- O script do teste A/B é executado via
useEffect. - O componente muda repentinamente para a Variante B.
Resultado: um solavanco na tela e perda no Cumulative Layout Shift (CLS) do Google.
A Solução: Next.js Middleware e Edge Functions
Para um ab test sem flicker, precisamos decidir qual variante o usuário deve visualizar antes de iniciar a renderização no servidor. O local perfeito para isso é o Middleware do Next.js.
Passo a Passo da Lógica
- A requisição HTTP atinge a borda (Vercel, Cloudflare, AWS).
- O Middleware intercepta o tráfego.
- Ele lê o ID do usuário (ou gera um novo via cookie) e faz um hash determinístico.
- O middleware anexa a variante decidida no header da requisição.
- A página do Next.js (
Server Component) lê esse header e renderiza apenas o conteúdo correto.
Vantagens dessa abordagem
- Zero Flicker: A página que o React hidrata já é a página exata da variante. Não há troca de estados visuais.
- Performance Nativa: Hashing determinístico na borda não gera requisições adicionais de latência. São cálculos matemáticos instantâneos (o que o Divisor faz por baixo dos panos).
- SEO Intacto: Os robôs do Google veem exatamente a mesma página renderizada e sem scripts pesados interrompendo a thread principal.
E sobre Server Components vs Client Components?
Com o App Router do Next.js, as coisas ficam ainda mais fáceis. Você recupera a variante no seu Server Component e pode passar como propriedade (props) para componentes interativos (Client Components).
Isso significa que você tem total segurança e as lógicas de feature flag nextjs não expõem prematuramente código oculto no pacote (bundle) do JavaScript para usuários não autorizados.
Testes eficientes hoje não alteram o DOM com JQuery; eles governam os fluxos renderizados pela aplicação diretamente dos bastidores!