Como funciona o SSR do React internamente
Acompanhe o fluxo renderToString/renderToPipeableStream e veja como o cliente retoma a hidratação.
Como funciona o SSR do React internamente é uma aula grátis de React Academy no CoddyKit. Esta é a aula 1 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de React Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de React Academy inclui 4 aulas no total.
O problema resolvido pelo SSR
O React no cliente precisa do JavaScript para renderizar. Os usuários veem uma página em branco até que o JS seja carregado e executado. O SSR pré-renderiza o HTML no servidor para que os usuários vejam o conteúdo imediatamente, melhorando o desempenho percebido e a otimização para mecanismos de busca.
renderToString
A API SSR original: renderToString(<App />) renderiza sincronamente a árvore de componentes como uma string HTML no servidor.
import { renderToString } from 'react-dom/server';
import App from './App';
// In an Express handler:
app.get('*', (req, res) => {
const html = renderToString(<App />);
res.send(`
<!DOCTYPE html>
<html><body>
<div id="root">${html}</div>
<script src="/bundle.js"></script>
</body></html>
`);
});Hidratação no cliente
Depois que o HTML chega, o navegador o interpreta e renderiza a interface. Em seguida, o hydrateRoot() do React associa ouvintes de eventos e torna o HTML estático interativo — esse processo é a hidratação.
// client/index.tsx
import { hydrateRoot } from 'react-dom/client';
import App from './App';
hydrateRoot(document.getElementById('root'), <App />);O que acontece durante a hidratação
O React percorre simultaneamente o DOM renderizado pelo servidor e o DOM virtual. Se eles coincidirem, o React associa os ouvintes sem modificar o DOM. Se forem diferentes, ele registra um aviso de hidratação e corrige o DOM.
renderToPipeableStream
A API de transmissão contínua do React 18 envia o HTML em blocos conforme os dados ficam disponíveis, permitindo que o navegador exiba progressivamente o conteúdo enquanto o servidor ainda processa a solicitação.
import { renderToPipeableStream } from 'react-dom/server';
app.get('*', (req, res) => {
const { pipe } = renderToPipeableStream(<App />, {
bootstrapScripts: ['/bundle.js'],
onShellReady() {
res.setHeader('content-type', 'text/html');
pipe(res); // starts streaming
},
});
});Suspense e transmissão contínua
Com SSR por transmissão contínua, os limites de Suspense transmitem primeiro o conteúdo alternativo e depois o substituem pelo conteúdo quando os dados são resolvidos — sem bloquear o envio inicial do HTML.
// The shell (nav, layout) streams immediately;
// <UserProfile> suspends and streams when data resolves
function App() {
return (
<Layout>
<Suspense fallback={<Skeleton />}>
<UserProfile /> {/* streams after data loads */}
</Suspense>
</Layout>
);
}Serialização de dados
Os dados obtidos no servidor precisam ser serializados e incorporados ao HTML para que o cliente possa lê-los durante a hidratação sem buscá-los novamente.
// Server:
const data = await fetchData();
const html = renderToString(<App data={data} />);
const serialized = JSON.stringify(data).replace(/</g, '\\u003c');
// Inline data in HTML:
`<script>window.__INITIAL_DATA__ = ${serialized};</script>`
// Client hydration reads:
const data = window.__INITIAL_DATA__;Diferenças entre ambientes
O código do servidor é executado no Node.js, não em um navegador. O código que faz referência a window, document ou localStorage falha no servidor. Proteja-o com typeof window !== 'undefined'.
const isBrowser = typeof window !== 'undefined';
function getTheme() {
if (!isBrowser) return 'light'; // server-safe default
return localStorage.getItem('theme') ?? 'light';
}Componentes de servidor do React vs. SSR
O SSR renderiza componentes como HTML a cada solicitação. Os Componentes de Servidor do React (RSC) são diferentes — o JavaScript deles nunca é enviado ao cliente e eles podem ser assíncronos, mas os RSC exigem um empacotador compatível com o protocolo RSC (Next.js etc.).
Benefícios de desempenho da transmissão contínua
O SSR por transmissão contínua melhora o Tempo até o primeiro byte (TTFB) da estrutura base e permite a hidratação seletiva — o navegador pode hidratar ilhas interativas antes que o HTML completo da página termine de ser transmitido.
Verificação rápida
O que o hydrateRoot() do React faz de diferente em relação ao createRoot() quando o HTML do servidor já existe?
Recapitulação
O SSR usa renderToPipeableStream para enviar o HTML antes que o JS seja carregado. O cliente chama hydrateRoot() para associar ouvintes de eventos ao HTML do servidor. O SSR por transmissão contínua com Suspense envia primeiro a estrutura base e preenche o conteúdo de forma assíncrona. Proteja as APIs do navegador com typeof window !== 'undefined'.
Perguntas Frequentes
A aula “Como funciona o SSR do React internamente” é grátis?
Sim — o texto completo de “Como funciona o SSR do React internamente” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de React Academy, atualize para CoddyKit PRO. O curso de React Academy inclui 4 aulas no total.
O que vou aprender em “Como funciona o SSR do React internamente”?
Acompanhe o fluxo renderToString/renderToPipeableStream e veja como o cliente retoma a hidratação. Você pratica React Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar React Academy?
Nenhuma experiência prévia é necessária. React Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 1 de 4.
Quanto tempo leva a aula “Como funciona o SSR do React internamente”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de React Academy?
Sim. Cada aula de React Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Como funciona o SSR do React internamente
- Erros de hidratação: causas e correções
- Hidratação seletiva e HTML em fluxo
- Padrão de arquitetura de ilhas