Nesta versão do Next.js, exploraremos o que são componentes cliente e servidor, suas diferenças, quando usar cada um e forneceremos exemplos práticos para ajudá-lo a implementá-los em seu projetos.

O que são componentes de cliente e servidor em Next.js?

Em Next.js, há uma distinção clara entre Componentes do cliente e Componentes do servidor. Essa separação permite tomar melhores decisões sobre onde e como processar o código, impactando diretamente o desempenho e a experiência do usuário.

Componentes do cliente

Componentes do cliente são executados no navegador, permitindo interatividade e acesso às APIs do navegador, como janela ou documento. Eles são ideais para gerenciar a interface dinâmica da sua aplicação e responder às ações do usuário.

Características principais:

• Executar no navegador (cliente).
• Tenha acesso a ganchos como useState ou useEffect.
• Usado para lidar com interações dinâmicas, como formulários ou botões.
• Essencial quando você precisa responder rapidamente às ações do usuário.

Exemplo de um componente cliente:

'use client'; // Indicates that this component runs on the client

import { useState } from 'react';

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

  return (
    

      
Client-side Counter
      
The count value is: {count}
       setCount(count   1)}>Increment
    
  );
}

Este exemplo clássico é um contador que permite ao usuário interagir diretamente com a página. O 'cliente de uso'; A diretiva informa ao Next.js que este componente deve ser executado no navegador.

Componentes do servidor

Componentes de servidor são um novo recurso na arquitetura Next.js. Esses componentes são processados ​​no servidor e enviam o HTML já renderizado para o navegador. Isso reduz a quantidade de JavaScript que chega ao cliente, acelerando o carregamento inicial da página.

Características principais:

• Renderizado no servidor.
• Não tem acesso às APIs do navegador, como window ou document, nem aos ganchos do React, como useState.
• Pode interagir diretamente com bancos de dados ou APIs externas.
• Otimize o desempenho enviando HTML em vez de JavaScript para o cliente.

Exemplo de um componente de servidor:

export default async function ServerComponent() {
  const data = await fetch('https://api.example.com/data').then(res => res.json());

  return (
    

      
Data from the Server
      
{data.message}
    
  );
}

Neste exemplo, o componente é renderizado no servidor, recupera dados de uma API e retorna o HTML renderizado. Isso significa que a lógica de busca de dados não chega ao cliente, melhorando o desempenho.

Novos recursos em Next.js

Next.js refina como os componentes do servidor e do cliente interagem. Aqui estão algumas das melhorias mais notáveis:

1. Componentes do servidor por padrão

Componentes agora são Componentes de Servidor por padrão. Isso significa que seu aplicativo é otimizado automaticamente enviando menos JavaScript para o navegador, a menos que você precise explicitamente de um Componente Cliente.

2. Streaming otimizado

O streaming permite que os componentes sejam carregados em partes. Isso é útil para páginas grandes ou com muitos dados, pois seções da página podem carregar à medida que ficam prontas, sem esperar que todo o conteúdo esteja disponível.

3. Controle granular

Next.js torna mais fácil decidir se um componente será executado no servidor ou no cliente, dando a você mais controle sobre como otimizar seu aplicativo.

4. Hidratação melhorada

Hidratação é o processo que transforma HTML estático enviado do servidor em uma página interativa no cliente. Com Next.js, a hidratação é mais eficiente e seletiva, ocorrendo apenas onde for absolutamente necessário.

Quando usar componentes cliente versus servidor

Use componentes do cliente quando:

1. Interatividade do usuário: quando você precisa lidar com interações como formulários ou botões que respondem em tempo real.
2. Gerenciamento de estados: Ideal para gerenciar estados locais que mudam dinamicamente, como um carrinho de compras.
3. Animações e efeitos visuais: ao contar com animações ou efeitos que são atualizados com base na interação do usuário.

Use componentes de servidor quando:

1. Consultas de banco de dados: quando você precisa buscar dados de um banco de dados antes de exibir o conteúdo.
2. Conteúdo Estático: Ideal quando o conteúdo não muda com frequência e não requer interatividade.
3. Melhoria de SEO: o conteúdo renderizado pelo servidor é mais acessível aos mecanismos de pesquisa, melhorando o SEO.

Exemplo de combinação de componentes de cliente e servidor:

// ServerComponent.tsx
export default async function ServerComponent() {
  const data = await fetch('https://api.example.com/products').then(res => res.json());

  return (
    

      
Product List (Server-rendered)
      

        {data.map((product: any) => (
          
{product.name}
        ))}
      
  );
}

// ClientComponent.tsx
'use client';

import { useState } from 'react';

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

  return (
    

       setSearch(e.target.value)}
        placeholder="Search product"
      />
      
Searching for: {search}
    
  );
}

Neste exemplo, o servidor renderiza a lista de produtos e a envia ao cliente, enquanto o componente de pesquisa é interativo e gerenciado no lado do cliente.

Conclusão

Next.js representa um ponto de viragem na forma como desenvolvemos aplicações web, otimizando o desempenho e a experiência do usuário. O uso eficiente de Componentes de Servidor e Componentes de Cliente permite que você crie aplicativos rápidos e dinâmicos com uma carga inicial mais leve.

Escolher corretamente entre um Componente de Servidor e um Componente de Cliente é crucial para aproveitar totalmente os recursos da estrutura. Com essas novas melhorias, é mais fácil tomar decisões informadas e criar aplicativos que não são apenas rápidos, mas também interativos e escaláveis.