Client Components

Q: O que a diretiva "use client" realmente faz?

Ela marca o arquivo como um limite do cliente -- o componente e todas as suas importações são incluídos no bundle JavaScript do cliente. Ela se aplica ao arquivo inteiro, não a um único componente. Client Components ainda são renderizados no servidor (SSR) para o HTML inicial, depois hidratados no cliente.

Q: Client Components são renderizados apenas no navegador?

Não. Client Components são renderizados no servidor na carga inicial da página (SSR). O servidor envia HTML, então o React o hidrata no cliente para anexar manipuladores de eventos e torná-lo interativo.

Q: Como acesso com segurança APIs do navegador como window ou localStorage?

Envolva o uso da API do navegador em useEffect para que ele só rode no cliente após a hidratação:

Q: Um Client Component pode importar um Server Component?

Não. Importar um Server Component dentro de um arquivo "use client" o converte silenciosamente em um Client Component. Em vez disso, passe o Server Component como children ou outra prop JSX de um componente pai Server Component.

Q: Quais props podem ser passadas de um Server Component para um Client Component?

As props devem ser serializáveis: strings, números, booleanos, arrays, objetos simples e Server Actions. Funções regulares, instâncias de classe, Refs e Símbolos não são serializáveis e falharão.

Q: Armadilha: Por que adicionar "use client" a um arquivo aumenta significativamente o tamanho do meu bundle?

Porque "use client" puxa todas as importações naquele arquivo para o bundle do cliente, incluindo bibliotecas utilitárias. Corrija isso mantendo os arquivos "use client" pequenos e focados -- extraia lógica pesada para arquivos separados que não sejam do cliente.

Q: Como faço um componente renderizar apenas no cliente sem SSR?

Use next/dynamic com ssr: false:

Adicione interatividade com "use client" -- hooks, manipuladores de eventos e APIs do navegador.

Receita

Cartão de receita de referência rápida -- pronto para copiar e colar.

// app/components/counter.tsx
"use client";
 
import { useState } from "react";
 
export function Counter({ initialCount = 0 }: { initialCount?: number }) {
  const [count, setCount] = useState(initialCount);
 
  return (
    <button onClick={() => setCount((c) => c + 1)}>
      Count: {count}
    </button>
  );
}

// app/page.tsx (Server Component importa o Client Component)
import { Counter } from "./components/counter";
 
export default function Page() {
  return (
    <main>
      <h1>Welcome</h1>
      <Counter initialCount={5} />
    </main>
  );
}

Quando usar isso: Você precisa de useState, useEffect, useRef, manipuladores de eventos (onClick, onChange) ou APIs do navegador (window, localStorage, IntersectionObserver).

Exemplo de Trabalho

// app/components/search-autocomplete.tsx
"use client";
 
import { useState, useEffect, useRef, useTransition } from "react";
import { useRouter } from "next/navigation";
 
type Suggestion = { id: string; label: string };
 
export function SearchAutocomplete() {
  const [query, setQuery] = useState("");
  const [suggestions, setSuggestions] = useState<Suggestion[]>([]);
  const [isOpen, setIsOpen] = useState(false);
  const [isPending, startTransition] = useTransition();
  const inputRef = useRef<HTMLInputElement>(null);
  const router = useRouter();
 
  useEffect(() => {
    if (query.length < 2) {
      setSuggestions([]);
      return;
    }
 
    const controller = new AbortController();
 
    fetch(`/api/suggestions?q=${encodeURIComponent(query)}`, {
      signal: controller.signal,
    })
      .then((res) => res.json())
      .then((data) => setSuggestions(data))
      .catch(() => {}); // ignora erros de abort
 
    return () => controller.abort();
  }, [query]);
 
  function handleSelect(suggestion: Suggestion) {
    setQuery(suggestion.label);
    setIsOpen(false);
    startTransition(() => {
      router.push(`/search?q=${encodeURIComponent(suggestion.label)}`);
    });
  }
 
  return (
    <div className="relative w-full max-w-md">
      <input
        ref={inputRef}
        type="search"
        value={query}
        onChange={(e) => {
          setQuery(e.target.value);
          setIsOpen(true);
        }}
        onFocus={() => setIsOpen(true)}
        placeholder="Search..."
        className="w-full border rounded px-4 py-2"
      />
 
      {isOpen && suggestions.length > 0 && (
        <ul className="absolute top-full left-0 right-0 bg-white border rounded-b shadow-lg z-10">
          {suggestions.map((s) => (
            <li key={s.id}>
              <button
                onClick={() => handleSelect(s)}
                className="w-full text-left px-4 py-2 hover:bg-gray-100"
              >
                {s.label}
              </button>
            </li>
          ))}
        </ul>
      )}
 
      {isPending && (
        <span className="absolute right-3 top-2.5 text-sm text-gray-400">
          Loading...
        </span>
      )}
    </div>
  );
}

// app/search/page.tsx (Server Component)
import { SearchAutocomplete } from "@/app/components/search-autocomplete";
 
export default function SearchPage() {
  return (
    <main className="p-6">
      <h1 className="text-2xl font-bold mb-4">Search</h1>
      <SearchAutocomplete />
    </main>
  );
}

O que isso demonstra:

A diretiva "use client" no topo do arquivo
Múltiplos hooks: useState, useEffect, useRef, useTransition
Manipuladores de eventos: onChange, onFocus, onClick
Buscando dados no cliente com limpeza via AbortController
Usando useRouter para navegação programática
Um Server Component importando e renderizando o Client Component

Mergulho Profundo

Como Funciona

Adicionar "use client" no topo de um arquivo o marca como um limite do cliente. O componente e todas as suas importações são incluídos no bundle JavaScript do cliente.
Client Components ainda são renderizados no servidor na carga inicial da página (SSR). O HTML é gerado no servidor, enviado para o navegador e, em seguida, hidratado -- o React anexa os manipuladores de eventos e torna o componente interativo.
Durante a navegação do lado do cliente, os Client Components são renderizados inteiramente no cliente usando o payload do RSC do servidor.
A diretiva "use client" se aplica ao arquivo, não a um único componente. Todas as exportações desse arquivo se tornam Client Components.
Client Components podem importar outros Client Components (com ou sem "use client" no filho). Eles não podem importar Server Components diretamente.
Props passadas de um Server Component para um Client Component devem ser serializáveis.

Variações

Entrada de formulário controlada:

"use client";
 
import { useState } from "react";
 
export function EmailForm({ onSubmitAction }: { onSubmitAction: (email: string) => Promise<void> }) {
  const [email, setEmail] = useState("");
 
  return (
    <form action={async () => { await onSubmitAction(email); }}>
      <input
        type="email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
      />
      <button type="submit">Subscribe</button>
    </form>
  );
}

Usando APIs do navegador com segurança:

"use client";
 
import { useEffect, useState } from "react";
 
export function WindowSize() {
  const [size, setSize] = useState({ width: 0, height: 0 });
 
  useEffect(() => {
    function handleResize() {
      setSize({ width: window.innerWidth, height: window.innerHeight });
    }
    handleResize();
    window.addEventListener("resize", handleResize);
    return () => window.removeEventListener("resize", handleResize);
  }, []);
 
  return <p>Window: {size.width} x {size.height}</p>;
}

Envolvendo uma biblioteca de cliente de terceiros:

// app/components/map.tsx
"use client";
 
import { MapContainer, TileLayer, Marker } from "react-leaflet";
 
export function Map({ lat, lng }: { lat: number; lng: number }) {
  return (
    <MapContainer center={[lat, lng]} zoom={13}>
      <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
      <Marker position={[lat, lng]} />
    </MapContainer>
  );
}

Notas de TypeScript

// Props do servidor devem ser serializáveis
type ClientProps = {
  initialData: string[];        // OK
  count: number;                // OK
  serverAction: (id: string) => Promise<void>; // OK (Server Action)
  // onClick: () => void;       // NÃO OK (função regular)
  // ref: React.Ref<T>;        // NÃO OK (não serializável)
};
 
// Tipos de manipulador de eventos
function handleClick(e: React.MouseEvent<HTMLButtonElement>) { ... }
function handleChange(e: React.ChangeEvent<HTMLInputElement>) { ... }
function handleSubmit(e: React.FormEvent<HTMLFormElement>) { ... }

Armadilhas

"use client" não significa "somente cliente" -- Client Components ainda são renderizados no servidor (SSR) na solicitação inicial. Eles rodam tanto no servidor quanto no cliente. Correção: Se você precisa de renderização exclusivamente para o cliente, use dynamic(() => import("..."), { ssr: false }).
Dessincronização de hidratação -- Se o HTML renderizado no servidor diferir do render do cliente (por exemplo, usando Date.now(), Math.random() ou verificações de window), o React registrará um erro de hidratação. Correção: Use useEffect para valores que diferem entre servidor e cliente, ou suppressHydrationWarning para dessincronizações intencionais.
Importar um Server Component em um Client Component -- Isso não é permitido. A importação será tratada como um Client Component. Correção: Passe o Server Component como children ou outra prop JSX em vez disso.
Aumento do tamanho do bundle -- Tudo importado em um arquivo "use client" acaba no bundle do cliente, incluindo bibliotecas utilitárias. Correção: Mantenha os arquivos "use client" pequenos e focados. Importe bibliotecas pesadas apenas onde necessário.
Todas as exportações se tornam componentes do cliente -- Se você exportar tanto uma função utilitária quanto um componente de um arquivo "use client", a utilidade também se tornará exclusiva para o cliente. Correção: Mantenha utilitários em arquivos separados, não do cliente.
Hooks não podem ser condicionais -- Hooks do React devem ser chamados na mesma ordem a cada renderização. Correção: Nunca coloque hooks dentro de blocos if, loops ou retornos antecipados.

Alternativas

Abordagem	Use Quando	Não Use Quando
Client Components	UI interativa com estado, efeitos ou APIs do navegador	Exibição pura de dados sem interatividade
Server Components	Renderização somente leitura, busca de dados, sem JS enviado	Você precisa de hooks ou manipuladores de eventos
`dynamic(import, { ssr: false })`	O componente nunca deve renderizar no servidor (por exemplo, libs de canvas)	SSR está bom e você só precisa de hidratação
Web Components	Você precisa de elementos interativos agnósticos de framework	Componentes React funcionam para seu caso de uso
Server Actions (form `action`)	Você pode lidar com a interação com um envio de formulário	Você precisa de feedback em tempo real do lado do cliente

FAQs

O que a diretiva "use client" realmente faz?

Ela marca o arquivo como um limite do cliente -- o componente e todas as suas importações são incluídos no bundle JavaScript do cliente.
Ela se aplica ao arquivo inteiro, não a um único componente.
Client Components ainda são renderizados no servidor (SSR) para o HTML inicial, depois hidratados no cliente.

Client Components são renderizados apenas no navegador?

Não. Client Components são renderizados no servidor na carga inicial da página (SSR). O servidor envia HTML, então o React o hidrata no cliente para anexar manipuladores de eventos e torná-lo interativo.

Quando devo usar um Client Component em vez de um Server Component?

Use um Client Component quando precisar de:

Hooks do React (useState, useEffect, useRef, useTransition)
Manipuladores de eventos (onClick, onChange, onFocus)
APIs do navegador (window, localStorage, IntersectionObserver)

Como acesso com segurança APIs do navegador como window ou localStorage?

Envolva o uso da API do navegador em useEffect para que ele só rode no cliente após a hidratação:

"use client";
import { useEffect, useState } from "react";
 
export function WindowSize() {
  const [width, setWidth] = useState(0);
  useEffect(() => {
    setWidth(window.innerWidth);
  }, []);
  return <p>Width: {width}</p>;
}

Um Client Component pode importar um Server Component?

Não. Importar um Server Component dentro de um arquivo "use client" o converte silenciosamente em um Client Component. Em vez disso, passe o Server Component como children ou outra prop JSX de um componente pai Server Component.

Quais props podem ser passadas de um Server Component para um Client Component?

As props devem ser serializáveis: strings, números, booleanos, arrays, objetos simples e Server Actions.
Funções regulares, instâncias de classe, Refs e Símbolos não são serializáveis e falharão.

Armadilha: Por que adicionar "use client" a um arquivo aumenta significativamente o tamanho do meu bundle?

Porque "use client" puxa todas as importações naquele arquivo para o bundle do cliente, incluindo bibliotecas utilitárias. Corrija isso mantendo os arquivos "use client" pequenos e focados -- extraia lógica pesada para arquivos separados que não sejam do cliente.

Armadilha: Vejo um erro de dessincronização de hidratação -- o que o causa?

Erros de hidratação ocorrem quando o HTML renderizado no servidor difere do render do cliente. Causas comuns:

Usar Date.now() ou Math.random() durante a renderização
Ler propriedades de window durante a renderização em vez de em useEffect
Correção: Mova valores diferentes para useEffect, ou use suppressHydrationWarning para dessincronizações intencionais.

Como faço um componente renderizar apenas no cliente sem SSR?

Use next/dynamic com ssr: false:

import dynamic from "next/dynamic";
 
const ClientOnlyMap = dynamic(
  () => import("./map"),
  { ssr: false }
);

Como tipar manipuladores de eventos em um Client Component com TypeScript?

function handleClick(e: React.MouseEvent<HTMLButtonElement>) { }
function handleChange(e: React.ChangeEvent<HTMLInputElement>) { }
function handleSubmit(e: React.FormEvent<HTMLFormElement>) { }

Como tipar props para um Client Component que recebe uma Server Action?

Server Actions são tipadas como funções assíncronas que retornam uma Promise:

type FormProps = {
  onSubmitAction: (email: string) => Promise<void>;
};

Funções regulares (não Server Actions) não são válidas como props serializáveis.

Qual é o padrão AbortController mostrado no exemplo de autocomplete de pesquisa?

O AbortController cancela requisições fetch em andamento quando a limpeza do useEffect é executada (por exemplo, quando query muda).
Isso evita que respostas obsoletas sobrescrevam resultados mais recentes.
O .catch(() => {}) ignora o erro de abort.

O que useTransition faz em um Client Component?

useTransition permite marcar uma atualização de estado como não urgente para que ela não bloqueie a UI.
isPending é true enquanto a transição está em execução, o que é útil para mostrar indicadores de carregamento.
No exemplo, ele envolve router.push() para evitar o bloqueio da entrada enquanto navega.

Relacionados

Server Components -- O modo de renderização padrão
Composition Patterns -- Misturando componentes de servidor e cliente
Search Params -- useSearchParams em Client Components
Server Actions -- Passando actions como props para Client Components

Receita

Cartão de receita de referência rápida -- pronto para copiar e colar.

// app/components/counter.tsx
"use client";
 
import { useState } from "react";
 
export function Counter({ initialCount = 0 }: { initialCount?: number }) {
  const [count, setCount] = useState(initialCount);
 
  return (
    <button onClick={() => setCount((c) => c + 1)}>
      Count: {count}
    </button>
  );
}

// app/page.tsx (Server Component importa o Client Component)
import { Counter } from "./components/counter";
 
export default function Page() {
  return (
    <main>
      <h1>Welcome</h1>
      <Counter initialCount={5} />
    </main>
  );
}

Quando usar isso: Você precisa de useState, useEffect, useRef, manipuladores de eventos (onClick, onChange) ou APIs do navegador (window, localStorage, IntersectionObserver).

Exemplo de Trabalho

// app/components/search-autocomplete.tsx
"use client";
 
import { useState, useEffect, useRef, useTransition } from "react";
import { useRouter } from "next/navigation";
 
type Suggestion = { id: string; label: string };
 
export function SearchAutocomplete() {
  const [query, setQuery] = useState("");
  const [suggestions, setSuggestions] = useState<Suggestion[]>([]);
  const [isOpen, setIsOpen] = useState(false);
  const [isPending, startTransition] = useTransition();
  const inputRef = useRef<HTMLInputElement>(null);
  const router = useRouter();
 
  useEffect(() => {
    if (query.length < 2) {
      setSuggestions([]);
      return;
    }
 
    const controller = new AbortController();
 
    fetch(`/api/suggestions?q=${encodeURIComponent(query)}`, {
      signal: controller.signal,
    })
      .then((res) => res.json())
      .then((data) => setSuggestions(data))
      .catch(() => {}); // ignora erros de abort
 
    return () => controller.abort();
  }, [query]);
 
  function handleSelect(suggestion: Suggestion) {
    setQuery(suggestion.label);
    setIsOpen(false);
    startTransition(() => {
      router.push(`/search?q=${encodeURIComponent(suggestion.label)}`);
    });
  }
 
  return (
    <div className="relative w-full max-w-md">
      <input
        ref={inputRef}
        type="search"
        value={query}
        onChange={(e) => {
          setQuery(e.target.value);
          setIsOpen(true);
        }}
        onFocus={() => setIsOpen(true)}
        placeholder="Search..."
        className="w-full border rounded px-4 py-2"
      />
 
      {isOpen && suggestions.length > 0 && (
        <ul className="absolute top-full left-0 right-0 bg-white border rounded-b shadow-lg z-10">
          {suggestions.map((s) => (
            <li key={s.id}>
              <button
                onClick={() => handleSelect(s)}
                className="w-full text-left px-4 py-2 hover:bg-gray-100"
              >
                {s.label}
              </button>
            </li>
          ))}
        </ul>
      )}
 
      {isPending && (
        <span className="absolute right-3 top-2.5 text-sm text-gray-400">
          Loading...
        </span>
      )}
    </div>
  );
}

// app/search/page.tsx (Server Component)
import { SearchAutocomplete } from "@/app/components/search-autocomplete";
 
export default function SearchPage() {
  return (
    <main className="p-6">
      <h1 className="text-2xl font-bold mb-4">Search</h1>
      <SearchAutocomplete />
    </main>
  );
}

O que isso demonstra:

A diretiva "use client" no topo do arquivo
Múltiplos hooks: useState, useEffect, useRef, useTransition
Manipuladores de eventos: onChange, onFocus, onClick
Buscando dados no cliente com limpeza via AbortController
Usando useRouter para navegação programática
Um Server Component importando e renderizando o Client Component

Mergulho Profundo

Como Funciona

Adicionar "use client" no topo de um arquivo o marca como um limite do cliente. O componente e todas as suas importações são incluídos no bundle JavaScript do cliente.
Client Components ainda são renderizados no servidor na carga inicial da página (SSR). O HTML é gerado no servidor, enviado para o navegador e, em seguida, hidratado -- o React anexa os manipuladores de eventos e torna o componente interativo.
Durante a navegação do lado do cliente, os Client Components são renderizados inteiramente no cliente usando o payload do RSC do servidor.
A diretiva "use client" se aplica ao arquivo, não a um único componente. Todas as exportações desse arquivo se tornam Client Components.
Client Components podem importar outros Client Components (com ou sem "use client" no filho). Eles não podem importar Server Components diretamente.
Props passadas de um Server Component para um Client Component devem ser serializáveis.

Variações

Entrada de formulário controlada:

"use client";
 
import { useState } from "react";
 
export function EmailForm({ onSubmitAction }: { onSubmitAction: (email: string) => Promise<void> }) {
  const [email, setEmail] = useState("");
 
  return (
    <form action={async () => { await onSubmitAction(email); }}>
      <input
        type="email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
      />
      <button type="submit">Subscribe</button>
    </form>
  );
}

Usando APIs do navegador com segurança:

"use client";
 
import { useEffect, useState } from "react";
 
export function WindowSize() {
  const [size, setSize] = useState({ width: 0, height: 0 });
 
  useEffect(() => {
    function handleResize() {
      setSize({ width: window.innerWidth, height: window.innerHeight });
    }
    handleResize();
    window.addEventListener("resize", handleResize);
    return () => window.removeEventListener("resize", handleResize);
  }, []);
 
  return <p>Window: {size.width} x {size.height}</p>;
}

Envolvendo uma biblioteca de cliente de terceiros:

// app/components/map.tsx
"use client";
 
import { MapContainer, TileLayer, Marker } from "react-leaflet";
 
export function Map({ lat, lng }: { lat: number; lng: number }) {
  return (
    <MapContainer center={[lat, lng]} zoom={13}>
      <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
      <Marker position={[lat, lng]} />
    </MapContainer>
  );
}

Notas de TypeScript

// Props do servidor devem ser serializáveis
type ClientProps = {
  initialData: string[];        // OK
  count: number;                // OK
  serverAction: (id: string) => Promise<void>; // OK (Server Action)
  // onClick: () => void;       // NÃO OK (função regular)
  // ref: React.Ref<T>;        // NÃO OK (não serializável)
};
 
// Tipos de manipulador de eventos
function handleClick(e: React.MouseEvent<HTMLButtonElement>) { ... }
function handleChange(e: React.ChangeEvent<HTMLInputElement>) { ... }
function handleSubmit(e: React.FormEvent<HTMLFormElement>) { ... }

Armadilhas

"use client" não significa "somente cliente" -- Client Components ainda são renderizados no servidor (SSR) na solicitação inicial. Eles rodam tanto no servidor quanto no cliente. Correção: Se você precisa de renderização exclusivamente para o cliente, use dynamic(() => import("..."), { ssr: false }).
Dessincronização de hidratação -- Se o HTML renderizado no servidor diferir do render do cliente (por exemplo, usando Date.now(), Math.random() ou verificações de window), o React registrará um erro de hidratação. Correção: Use useEffect para valores que diferem entre servidor e cliente, ou suppressHydrationWarning para dessincronizações intencionais.
Importar um Server Component em um Client Component -- Isso não é permitido. A importação será tratada como um Client Component. Correção: Passe o Server Component como children ou outra prop JSX em vez disso.
Aumento do tamanho do bundle -- Tudo importado em um arquivo "use client" acaba no bundle do cliente, incluindo bibliotecas utilitárias. Correção: Mantenha os arquivos "use client" pequenos e focados. Importe bibliotecas pesadas apenas onde necessário.
Todas as exportações se tornam componentes do cliente -- Se você exportar tanto uma função utilitária quanto um componente de um arquivo "use client", a utilidade também se tornará exclusiva para o cliente. Correção: Mantenha utilitários em arquivos separados, não do cliente.
Hooks não podem ser condicionais -- Hooks do React devem ser chamados na mesma ordem a cada renderização. Correção: Nunca coloque hooks dentro de blocos if, loops ou retornos antecipados.

Alternativas

Abordagem	Use Quando	Não Use Quando
Client Components	UI interativa com estado, efeitos ou APIs do navegador	Exibição pura de dados sem interatividade
Server Components	Renderização somente leitura, busca de dados, sem JS enviado	Você precisa de hooks ou manipuladores de eventos
`dynamic(import, { ssr: false })`	O componente nunca deve renderizar no servidor (por exemplo, libs de canvas)	SSR está bom e você só precisa de hidratação
Web Components	Você precisa de elementos interativos agnósticos de framework	Componentes React funcionam para seu caso de uso
Server Actions (form `action`)	Você pode lidar com a interação com um envio de formulário	Você precisa de feedback em tempo real do lado do cliente

FAQs

O que a diretiva "use client" realmente faz?

Ela marca o arquivo como um limite do cliente -- o componente e todas as suas importações são incluídos no bundle JavaScript do cliente.
Ela se aplica ao arquivo inteiro, não a um único componente.
Client Components ainda são renderizados no servidor (SSR) para o HTML inicial, depois hidratados no cliente.

Client Components são renderizados apenas no navegador?

Quando devo usar um Client Component em vez de um Server Component?

Use um Client Component quando precisar de:

Hooks do React (useState, useEffect, useRef, useTransition)
Manipuladores de eventos (onClick, onChange, onFocus)
APIs do navegador (window, localStorage, IntersectionObserver)

Como acesso com segurança APIs do navegador como window ou localStorage?

Envolva o uso da API do navegador em useEffect para que ele só rode no cliente após a hidratação:

"use client";
import { useEffect, useState } from "react";
 
export function WindowSize() {
  const [width, setWidth] = useState(0);
  useEffect(() => {
    setWidth(window.innerWidth);
  }, []);
  return <p>Width: {width}</p>;
}

Um Client Component pode importar um Server Component?

Quais props podem ser passadas de um Server Component para um Client Component?

As props devem ser serializáveis: strings, números, booleanos, arrays, objetos simples e Server Actions.
Funções regulares, instâncias de classe, Refs e Símbolos não são serializáveis e falharão.

Armadilha: Por que adicionar "use client" a um arquivo aumenta significativamente o tamanho do meu bundle?

Armadilha: Vejo um erro de dessincronização de hidratação -- o que o causa?

Erros de hidratação ocorrem quando o HTML renderizado no servidor difere do render do cliente. Causas comuns:

Usar Date.now() ou Math.random() durante a renderização
Ler propriedades de window durante a renderização em vez de em useEffect
Correção: Mova valores diferentes para useEffect, ou use suppressHydrationWarning para dessincronizações intencionais.

Como faço um componente renderizar apenas no cliente sem SSR?

Use next/dynamic com ssr: false:

import dynamic from "next/dynamic";
 
const ClientOnlyMap = dynamic(
  () => import("./map"),
  { ssr: false }
);

Como tipar manipuladores de eventos em um Client Component com TypeScript?

function handleClick(e: React.MouseEvent<HTMLButtonElement>) { }
function handleChange(e: React.ChangeEvent<HTMLInputElement>) { }
function handleSubmit(e: React.FormEvent<HTMLFormElement>) { }

Como tipar props para um Client Component que recebe uma Server Action?

Server Actions são tipadas como funções assíncronas que retornam uma Promise:

type FormProps = {
  onSubmitAction: (email: string) => Promise<void>;
};

Funções regulares (não Server Actions) não são válidas como props serializáveis.

Qual é o padrão AbortController mostrado no exemplo de autocomplete de pesquisa?

O AbortController cancela requisições fetch em andamento quando a limpeza do useEffect é executada (por exemplo, quando query muda).
Isso evita que respostas obsoletas sobrescrevam resultados mais recentes.
O .catch(() => {}) ignora o erro de abort.

O que useTransition faz em um Client Component?

useTransition permite marcar uma atualização de estado como não urgente para que ela não bloqueie a UI.
isPending é true enquanto a transição está em execução, o que é útil para mostrar indicadores de carregamento.
No exemplo, ele envolve router.push() para evitar o bloqueio da entrada enquanto navega.

Relacionados

Server Components -- O modo de renderização padrão
Composition Patterns -- Misturando componentes de servidor e cliente
Search Params -- useSearchParams em Client Components
Server Actions -- Passando actions como props para Client Components

Client Components

Buscar na documentação

Client Components