image

Acesse bootcamps ilimitados e +650 cursos

50
%OFF
Article image
ARIOSTO LEAL
ARIOSTO LEAL05/10/2024 08:03
Compartilhe

Entendendo 'useClient' e 'useServer' no Next.js

  • #TypeScript
  • #Next.js
  • #React

Entendendo 'useClient' e 'useServer' no Next.js

useClient e são ganchos React introduzidos em Next.js para otimizar e esclarecer o contexto de execução de componentes ou lógica dentro de um aplicativo. Esses ganchos fazem parte dos aprimoramentos contínuos do Next.js para oferecer suporte aos componentes do React Server, permitindo que os desenvolvedores especifiquem mais claramente se um componente deve ser executado no lado do cliente ou no lado do servidor.useServer

useServer

O gancho é uma indicação clara de que o código ou componente incluído deve ser executado apenas no servidor. Isso é particularmente útil para operações confidenciais ou que precisam de acesso direto a recursos do lado do servidor, como bancos de dados ou variáveis de ambiente que não devem ser expostas ao cliente. Aqui está um exemplo rápido:useServer

'usar servidor'

função ServerComponent() {

 const data = useServer(() => {

  Buscar dados ou executar operações somente de servidor

  return fetchSecretData();

 });

 return <div>Dados secretos: {data}</div>;

}

import { useServer } from 'next/server';

função ServerComponent() {

 const serverData = useServer(() => {

  Simular a busca de dados somente do servidor

 const dados = fetchServerData();

  dados de retorno;

 });

 return <div>Dados carregados somente do servidor: {serverData}</div>;

}

função fetchServerData() {

 Finja buscar dados que não devem ser expostos ao cliente

 return "Informações secretas do servidor";

}

Neste exemplo, é uma função que você não gostaria de expor ao lado do cliente devido a preocupações de segurança ou motivos computacionais. Ao usar o , você garante que essa função seja executada apenas no servidor.fetchSecretDatauseServer

useClient

Por outro lado, é usado para denotar que o código ou componente incluído deve ser executado somente no lado do cliente. Isso é adequado para interações que dependem exclusivamente dos recursos do navegador, como manipulações de DOM ou manipulação de estado do lado do cliente que não precisa ser pré-renderizada no servidor. Veja como você pode usá-lo:useClient

'usar cliente'

função ClientComponent() {

 const [contagem, setCount] = useClient(() => {

  Execute esse gancho apenas no ambiente do lado do cliente

 Const [localCount, setLocalCount] = useState(0);

  return [localCount, setLocalCount];

 });

 retornar (

  <Div>

   <button onClick={() => setCount(count + 1)}>Incremento</button>

 Contagem: {contagem}

  </Div>

 );

}

import { useClient } from 'next/client';

import { useState } from 'react';

função ClientComponent() {

 const [contagem, setCount] = useClient(() => {

  Inicializar o estado somente no cliente

  const [localCount, setLocalCount] = useState(0);

  return [localCount, setLocalCount];

 });

 Manipulador de clique de botão para incrementar a contagem

 alça de funçãoClique () {

  setCount(contagem + 1);

 }

 retornar (

  <Div>

   <button onClick={handleClick}>Incremento</button>

 Contagem: {contagem}

  </Div>

 );

}

Neste exemplo, o gerenciamento de estado for é puramente do lado do cliente, o que é ideal para encapsular a lógica específica do cliente.countuseClient

Quando usar vs. useServeruseClient

Decidir se deve usar ou se resume a entender onde seu código precisa ser executado para obter desempenho e segurança ideais. Aqui estão algumas diretrizes:useServeruseClient

Use useServer se:

Você precisa acessar recursos do lado do servidor ou executar ações com segurança, longe do alcance do cliente.

Você deseja pré-renderizar dados ou realizar cálculos durante a renderização do lado do servidor (SSR) para obter benefícios de SEO ou carregamentos de página mais rápidos.

Use useClient se:

Seu componente ou lógica deve interagir com APIs específicas do navegador ou recursos do lado do cliente, como o armazenamento local.

Você está manipulando o estado ou os efeitos que só devem ocorrer no ambiente do cliente, como animações ou eventos de entrada do usuário.

Compartilhe
Comentários (0)