Dois Tipos de Componente

Cada componente que você escreveu até agora nesta seção foi executado em um lugar que talvez você não tenha notado: no servidor. Isso não é um modo especial que você ativou: é o padrão, e é a ideia mais importante do Next.js.

Existem exatamente dois tipos de componentes, e cada um oferece algo que o outro não consegue.

Server components: o padrão

• Eles executam uma vez, no servidor, antes de a página ser enviada
• Eles podem ser async, portanto podem usar await para buscar dados diretamente dentro do componente
• Eles não enviam JavaScript para o navegador: o usuário baixa o resultado, não o código

O problema: no momento em que a página chega ao navegador, um componente de servidor está finalizado. Ele é uma captura instantânea. Ele não pode lembrar de nada, reagir a um clique ou mudar.

Client components: opt in

Quando você precisa que a página responda, você habilita o arquivo no navegador com uma linha bem no topo:

'use client';

Isso marca o arquivo como um componente cliente (client component), e apenas componentes cliente podem usar:

• Hooks: useState, useEffect e afins
• Manipuladores de eventos: onClick, onChange, …
• APIs do navegador: window, localStorage

Note a troca. Um componente do servidor (server component) é rápido e silencioso, mas estático. Um componente do cliente (client component) é interativo, mas seu código precisa ser baixado e executado no navegador.

Portanto, a pergunta que você se fará sobre cada componente a partir de agora não é "de qual deles eu gosto?", mas sim "esta peça em particular precisa responder ao usuário?" Se a resposta for não (e geralmente é), deixe-a no servidor.