Skip to main content

Use Client e Use Server

  • Use Client e Use Server

No Next.js 13 e versões superiores, a introdução dos diretórios app e as diretivas use client e use server adicionaram mais flexibilidade para a renderização de componentes. Aqui está uma explicação detalhada sobre cada uma:

use client​

A diretiva use client é usada para definir explicitamente que um arquivo de componente deve ser renderizado no lado do cliente. Isso é útil em casos onde você precisa de funcionalidade que depende de APIs do navegador, como manipuladores de eventos, useState, useEffect e outras funcionalidades específicas do React que requerem um ambiente do navegador.

Exemplo de uso:​

// app/page.tsx
'use client';

import { useState } from 'react';

const MyClientComponent = () => {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
};

export default MyClientComponent;

use server​

A diretiva use server é utilizada para marcar componentes ou funções que devem ser executados no servidor. Isso permite que você use APIs específicas do servidor, como acessar bancos de dados diretamente, manipular arquivos do sistema, etc. Geralmente, o Next.js assume que todas as rotas e componentes em app são renderizados no servidor, a menos que seja explicitamente especificado de outra forma.

Exemplo de uso:​

// app/api/hello/route.ts
'use server';

import { NextResponse } from 'next/server';

export async function GET() {
  return NextResponse.json({ message: 'Hello from the server!' });
}

Quando usar cada diretiva​

  • Client Components (use client): Use quando você precisa de interatividade no navegador, como manipulação de estado, efeitos colaterais que dependem do DOM, ou qualquer coisa que precise rodar no ambiente do cliente.
  • Server Components (use server): Use para operações que não precisam ser expostas ao cliente, como renderização inicial de dados, operações em bancos de dados, etc.

Combinando Client e Server Components​

Você pode combinar componentes do cliente e do servidor na mesma aplicação. Por exemplo, um componente do servidor pode renderizar um componente do cliente:

// app/page.tsx
import MyClientComponent from './MyClientComponent';

export default function Page() {
  return (
    <div>
      <h1>Server Rendered Component</h1>
      <MyClientComponent />
    </div>
  );
}

Conclusão​

  • use client: O componente é renderizado no servidor inicialmente, mas a hidratação e toda a interatividade acontecem no cliente.
  • use server: O código é executado inteiramente no servidor e não é enviado para o cliente