Desvendando Server Components e Client Components - Guia Completo com Jancer!

Neste vídeo, exploramos os dois tipos de componentes no Next.js 13+ com App Router: Server Components e Client Components, entendendo suas diferenças fundamentais e casos de uso ideal para cada abordagem.

Server Components: O Novo Padrão

Características principais:

Renderização no servidor: O HTML é gerado no servidor e enviado pronto ao cliente
Zero JavaScript no cliente: Não usa recursos do navegador para renderização
Acesso direto a recursos do servidor: Conexão com bancos de dados, APIs seguras, etc.
Melhor desempenho: Reduz o bundle JavaScript enviado ao cliente
SEO aprimorado: Conteúdo visível imediatamente para crawlers

1// Exemplo de Server Component  (padrão no App Router) 
2async function UserProfile() {
3 const user = await getUserFromDB();
4 // Acesso direto ao banco
5 return ( 
6<div>
7 <h1>{user.name}</h1> <p>{user.bio}</p> 
8</div> ); }

Client Components: Quando Usar

Necessários para funcionalidades interativas:

Componentes com estados (useState)
Efeitos colaterais (useEffect)
Eventos de UI (onClick, onChange)
Hooks customizados
APIs do navegador (localStorage, geolocation)

1"use client";
2 // Diretiva obrigatória
3 import { useState } from "react";
4 function Counter() {
5 const [count, setCount] = useState(0);
6 return ( 
7   <button onClick={() => setCount(c => c + 1)}> 
8      Clicks: {count} 
9  </button> );
10 }

Arquitetura Híbrida Recomendada

Melhores práticas de organização:

 Componente Pai (Server)
     Cabeçalho (Server)
     Conteúdo (Server)
     InteractiveSection (Client)
       Button (Client)
       Modal (Client)

Manter Client Components nas "folhas" da árvore de componentes
Prefira Server Components para conteúdo estático
Isolar interatividade em componentes específicos

Benefícios da Abordagem Híbrida

Vantagem	Server Components	Client Components
Performance	⭐️⭐️⭐️⭐️⭐️	⭐️⭐️⭐️
Segurança	⭐️⭐️⭐️⭐️⭐️	⭐️⭐️
Interatividade	❌	⭐️⭐️⭐️⭐️⭐️
Tamanho do Bundle	⭐️⭐️⭐️⭐️⭐️	⭐️⭐️