Renderização no Cliente (CSR)

Páginas são renderizadas no cliente após o JavaScript carregar. Ideal para SPAs, Jogos e Dashboards onde a interatividade é essencial.

Servidor

🌐
Request
Response
🖥️
Servidor envia HTML/CSS/JS

Cliente

Cliente carrega HTML/CSS/JS
React.mount()
render()
componentDidMount() / useEffect()
JavaScript busca dados
Conteúdo dinâmico renderizado no cliente
✨Renderizar UI
Benefícios x Trade-offs

Benefits

  • •Interatividade Rica: Interatividade completa no cliente
  • •Redução de Carga do Servidor: Processamento mínimo do servidor
  • •Atualizações Dinâmicas: Atualizações de conteúdo em tempo real
  • •Suporte Offline: Funciona sem conexão com servidor

Trade-offs

  • •SEO inicial ruim: Motores de busca veem HTML vazio
  • •TTFB lento: Conteúdo carrega após JavaScript
  • •Alto uso de CPU do cliente: Toda renderização no cliente
  • •Sem conteúdo sem JavaScript: Quebra se JS estiver desabilitado
Como implementar?

CSR usa componentes do lado do cliente com hooks React para interatividade.

"use client";

import { useState, useEffect } from "react";

export default function ClientComponent() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch("/api/data")
      .then((res) => res.json())
      .then((data) => setData(data));
  }, []);

  return <div>{data?.message}</div>;
}
  • •Use a diretiva 'use client' no topo do arquivo
  • •Componentes podem usar hooks React (useState, useEffect, etc.)
  • •Busca de dados acontece no lado do cliente
  • •Perfeito para recursos interativos e atualizações dinâmicas