React 19.3 foi lançado no npm em 9 de setembro, trazendo a nova API react-dom browser() que oferece aos desenvolvedores uma forma nativa e formalizada de optar pela renderização exclusiva no cliente. A adição resolve um problema recorrente em aplicações com server-side rendering (SSR): componentes que dependem de localStorage, window ou dados específicos do dispositivo, como timezone, não conseguem gerar HTML significativo no servidor.
Antes dessa solução, os desenvolvedores usavam workarounds que causavam problemas. A estratégia mais comum era verificar typeof window !== 'undefined' ou usar um mounted flag dentro de um effect. Essas abordagens frequentemente resultavam em hydration mismatches, quando a renderização do servidor e a primeira renderização no cliente produzem outputs diferentes, causando inconsistências visuais e comportamentais.
A nova API simplifica esse padrão. Um componente que precisa acessar dados exclusivos do navegador pode agora usar use(browser()) dentro de um Client Component, desde que esteja envolvido por um Suspense boundary. Durante a renderização no servidor, use(browser()) suspende o componente e o servidor coloca o fallback do Suspense boundary no HTML. No navegador, a função retorna undefined, permitindo que o componente renderize normalmente após a hidratação.
Um exemplo prático mostra a aplicação:
import { use } from 'react';
import { browser } from 'react-dom';
function LocalTime() {
use(browser());
return <p>{new Intl.DateTimeFormat().resolvedOptions().timeZone}</p>;
}
A API também suporta fetching de dados condicional. Componentes podem buscar dados do servidor quando um loader fornece initialData e optar por renderização exclusiva no cliente em outros casos. React adiciona um callback onBrowserBailout e um argumento reason opcional, permitindo que equipes rastreiem exatamente onde a renderização no servidor foi ignorada.
Essa mudança aproxima React de soluções específicas de frameworks. Next.js oferecia funcionalidade similar através de dynamic(() => import('./C'), { ssr: false }) via next/dynamic, enquanto Astro expunha a diretiva client:only. Ambas as abordagens, porém, estavam vinculadas aos bundlers específicos desses frameworks. A API browser() move essa capacidade para o núcleo do React, funcionando com qualquer configuração de SSR, independentemente do framework ou bundler utilizado.
A comunidade recebeu a adição com entusiasmo. Desenvolvedores descreveram a solução como eliminando "hacky server error-suppression workarounds" e a versão com fetching condicional foi chamada de "a solução mais limpa para a questão 'isso deve fazer fetch no servidor ou não' que já vi".
Atualmente, a funcionalidade está disponível no Canary channel e marcada como Canary-only na documentação de referência. Para adotar a API em produção, desenvolvedores devem atualizar para react@19.3 e react-dom@19.3, seguindo o React 19 upgrade guide. É recomendável confirmar o canal de lançamento antes de depender da API em aplicações de produção.
