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.
