Cliente Gordo vs Magro

Thin client vs Fat client. SPA vs SSR vs SSG. Quando o frontend é React e o backend é API pura. Implicações para arquitetura do backend.

thin clientfat clientSPACSRSSRSSGNext.js

Thin vs Fat Client

A decisão de onde processar a lógica — no cliente (browser) ou no servidor — é uma das mais fundamentais em arquitetura web. Ela define performance, segurança, manutenibilidade e custo.

🧱 Thin Client (magro)

Lógica toda no servidor
Browser só renderiza HTML
Ex: PHP/LAMP clássico
✓ Simples / seguro
✗ Navegação recarrega página

💪 Fat Client (gordo)

Lógica no browser (JS)
Servidor fornece só dados (API)
Ex: React, Vue, Angular
✓ Experiência fluida (SPA)
✗ Bundle JS maior / SEO

SPA — Single Page Application

SPA é o modelo fat client moderno. O browser baixa o app JavaScript uma vez; depois, toda navegação é feita com AJAX/fetch — só os dados mudam, não a página inteira.

⚡

por que importa para o backend

Se o frontend é um SPA, o backend é pura API REST/JSON. Nenhum HTML gerado no servidor. Isso muda completamente como você escreve o backend Node.js — só endpoints, não templates.

SSR vs CSR vs SSG — as 3 estratégias

CSR

Client-Side Rendering. React/Vue. Bundle JS. Ótimo para apps autenticados.

SSR

Server-Side Rendering. Next.js. HTML no servidor. Melhor SEO e performance inicial.

SSG

Static Site Generation. HTML pré-gerado. Ultra rápido. Bom para conteúdo estático.

Quando usar cada abordagem

A escolha não é binária — sistemas modernos combinam as abordagens por rota.

🎯

regra prática

Dashboard e área logada → CSR (SPA). Landing page e blog → SSG. E-commerce com SEO → SSR. API pura → REST/GraphQL. Next.js permite misturar tudo isso no mesmo projeto.

javascript
// CSR — React busca dados via API
function UserProfile({ userId }) {
  const [user, setUser] = useState(null)

  useEffect(() => {
    // Só dados — sem HTML do servidor
    fetch(`/api/users/${userId}`)
      .then(r => r.json())
      .then(setUser)
  }, [userId])

  if (!user) return <Skeleton />
  return <div>{user.name}</div>
}

// SSR — Next.js gera HTML no servidor
export async function getServerSideProps({ params }) {
  const user = await fetchUser(params.id)
  return { props: { user } }
}

⚡

quiz · aula 18

Teste seus conhecimentos

0/3 respondidas

QUESTÃO 01

Em um fat client (SPA), o que o servidor backend fornece?

QUESTÃO 02

SSG (Static Site Generation) é mais adequado para...

QUESTÃO 03

Qual é a principal vantagem do SSR para e-commerce?

0/3

← aula anterior

Como a Web Funciona

aula 18 de 67

módulo 1

próxima aula →

URL, Rota e Endpoint