Diretivas no React moderno: entendendo use client e use server

React usa diretivas?

Sim, mas calma: não é igual ao Angular ou Vue.

No Angular você vê coisas como *ngIf, *ngFor.

No Vue você vê v-if, v-for, v-model.

No React tradicional, a gente não costuma chamar isso de diretiva.

A gente usa JavaScript direto no JSX.

Exemplo simples:

{isLoggedIn && <Dashboard />}

Isso seria o equivalente a dizer:

“Se o usuário estiver logado, mostra o Dashboard.”

Mas no React moderno, principalmente quando falamos de React Server Components, existem diretivas como:

'use client'

e:

'use server'

Elas não servem para fazer if, for ou manipular template.

Elas servem para dizer onde aquele código deve rodar: no navegador ou no servidor.

O que é e quando usar use client?

A diretiva 'use client' diz que aquele arquivo precisa rodar no navegador.

Pense assim: se o componente precisa de clique, estado, efeito, input digitável ou acesso ao window, ele provavelmente precisa ser um Client Component.

Você usa use client quando precisar de coisas como:

useState
useEffect
onClick
onChange
localStorage
window
document

Exemplo com use client:

'use client'

import { useState } from 'react'

export default function Counter() {
const [count, setCount] = useState(0)

return (
  <button onClick={() => setCount(count + 1)}>
    Contador: {count}
  </button>
)
}

Aqui temos um botão que muda o número na tela.

Para isso funcionar, o React precisa enviar JavaScript para o navegador.

Afinal, quem vai escutar o clique é o browser do usuário.

Agora imagine o mesmo código sem use client:

import { useState } from 'react'

export default function Counter() {
const [count, setCount] = useState(0)

return (
  <button onClick={() => setCount(count + 1)}>
    Contador: {count}
  </button>
)
}

Em um ambiente com Server Components, como o App Router do Next.js, isso daria problema.

O framework entenderia esse arquivo como um Server Component.

Só que Server Component não pode usar useState nem lidar com clique diretamente.

Na prática, você veria um erro dizendo que useState só pode ser usado em um Client Component.

Então a regra mental é:

Se o componente é interativo, coloque:

'use client'

no topo do arquivo.

Exemplo com formulário:

'use client'

import { useState } from 'react'

export default function SearchBox() {
const [search, setSearch] = useState('')

return (
  <input
    value={search}
    onChange={(event) => setSearch(event.target.value)}
    placeholder="Buscar artigo..."
  />
)
}

Esse input precisa guardar o que o usuário está digitando.

Sem use client, esse componente não conseguiria usar useState.

Ou seja, ele não teria esse comportamento interativo no navegador.

O que é e quando usar use server?

A diretiva 'use server' diz que aquela função deve rodar no servidor.

Pense no servidor como o lugar seguro para fazer coisas sensíveis.

Por exemplo: salvar no banco, acessar API privada, usar token secreto ou validar dados importantes.

Você usa use server quando precisa fazer ações como:

criar usuário
salvar post
deletar registro
enviar e-mail
consultar banco de dados
usar uma chave secreta

Exemplo simples:

'use server'

export async function createPost(formData) {
const title = formData.get('title')

console.log('Salvando no servidor:', title)

return {
  success: true
}
}

Essa função não deve rodar no navegador.

Ela pode acessar banco, variáveis de ambiente e regras internas da aplicação.

É exatamente por isso que ela fica no servidor.

Agora podemos usar essa função em um formulário:

import { createPost } from './actions'

export default function PostForm() {
return (
  <form action={createPost}>
    <input name="title" placeholder="Título do post" />
    <button type="submit">Salvar</button>
  </form>
)
}

Quando o usuário envia o formulário, a função createPost roda no servidor.

O navegador não recebe o código interno dessa função.

Ele apenas dispara a ação.

Agora imagine tentar fazer isso sem use server:

export async function createPost(formData) {
const title = formData.get('title')

console.log('Salvando no servidor:', title)

return {
  success: true
}
}

Nesse caso, o framework não sabe que essa função é uma Server Function.

Se você tentar chamar essa função a partir de um Client Component, pode dar erro.

Ou pior: você pode acabar misturando código de servidor com código de navegador.

Exemplo ruim:

'use client'

import { createPost } from './actions'

export default function Button() {
return (
  <button onClick={() => createPost()}>
    Criar post
  </button>
)
}

Se createPost acessa banco de dados, isso não pode ir para o navegador.

Banco de dados, senha, token e regra sensível precisam ficar no servidor.

É aí que use server ajuda a separar as responsabilidades.

Um exemplo mais real seria:

'use server'

import { db } from '@/lib/db'

export async function deletePost(id) {
await db.post.delete({
  where: { id }
})

return {
  success: true
}
}

Essa função mexe no banco de dados.

Então ela não pertence ao navegador.

Ela pertence ao servidor.

Mas atenção: use server não é mágica de segurança total.

Você ainda precisa validar dados, checar permissões e confirmar se o usuário pode executar aquela ação.

Exemplo:

'use server'

import { db } from '@/lib/db'
import { getCurrentUser } from '@/lib/auth'

export async function deletePost(id) {
const user = await getCurrentUser()

if (!user) {
  throw new Error('Usuário não autenticado')
}

await db.post.delete({
  where: {
    id,
    userId: user.id
  }
})
}

Aqui a função só deleta o post se o usuário estiver logado.

Esse é o tipo de cuidado que você precisa ter.

Rodar no servidor ajuda, mas você ainda precisa proteger sua regra de negócio.

Resumindo de um jeito simples

Use use client quando o componente precisar de interação no navegador.

Use use server quando a função precisar rodar no servidor.

use client é para interface interativa.

use server é para ações seguras no backend.

Um exemplo mental:

Botão clicável, estado, input, modal → use client

Banco de dados, token secreto, salvar dados → use server

Então não pense nessas diretivas como “coisas parecidas com Vue ou Angular”.

No React moderno, elas são mais sobre arquitetura.

Elas ajudam a separar o que roda no navegador e o que roda no servidor.

Se você está aprendendo React, Next.js e desenvolvimento frontend moderno, me acompanhe nas redes sociais.

Eu compartilho conteúdos sobre programação, frontend, carreira dev e projetos práticos para quem quer evoluir de verdade.

Salve este artigo para consultar depois e compartilhe com outro dev que ainda confunde use client com use server.

Fontes de Produção:

Ilustrações geradas por ChatGPT.

Conteúdo gerado por: ChatGPT e revisões humanas.

#ReactJS #NextJS #Frontend