Os aplicativos modernos exigem muito tempo de pesquisa, design, desenvolvimento e teste. Existem muitas técnicas diferentes que podem ser usadas para construir aplicativos modernos, cada uma dessas técnicas é para resolver problemas específicos e cada uma delas tem seus prós e contras. Não há solução mágica para criar aplicativos modernos.

Ao trabalhar com o React, podemos citar algumas técnicas diferentes que são usadas hoje em dia, mas as mais usadas são a renderização do lado do servidor e a renderização do lado do cliente. Ambas as técnicas resolvem problemas específicos e são as mais usadas por desenvolvedores para criar aplicativos modernos e sofisticados.

No final de 2020, a equipe React propôs um novo recurso do React chamado Componentes do React Server . Desde então, a comunidade React começou a discutir os prós e os contras dessa nova maneira de criar aplicativos React e como ela pode impactar o futuro dos aplicativos React.

Vamos cobrir os componentes do React Server e como eles vão mudar a maneira moderna de criar aplicativos React.

Componentes do React Server

Antes de aprender mais sobre os componentes do React Server, lembre-se de que ele ainda está em desenvolvimento e não é recomendado para uso na produção.

Da equipe React :

Os componentes do servidor permitem que os desenvolvedores criem aplicativos que abrangem o servidor e o cliente, combinando a rica interatividade dos aplicativos do lado do cliente com o desempenho aprimorado da renderização tradicional do servidor.

Reagir Os componentes do servidor não terão nenhum impacto no tamanho do pacote e provavelmente mudarão a forma como construímos os aplicativos React. Isso não apenas reduzirá o tamanho do pacote em si, mas também melhorará o tempo de carregamento da página inicial.

Reagir Os componentes do servidor são renderizados no servidor e apenas o conteúdo renderizado é enviado ao cliente:

 importar banco de dados de"banco de dados"; Comentário const=(adereços)=> { const {id}=adereços; const comment=db.comments.get (id); Retorna ( 
 
 {comment.title} 
 
 {comment.text} 
 
 );
};

Um componente React Server se parece com um componente React tradicional, ele recebe adereços e tem um método de renderização. Possui apenas alguns recursos adicionais, como:

• Eles podem acessar diretamente as fontes de dados do servidor, como microsserviços, funções, banco de dados, etc. As possibilidades que esse recurso abre são enormes, poderemos criar APIs internas que funcionam com várias fontes de dados, podemos ter acesso ao nosso servidor dentro de nosso componente sem precisar expô-lo diretamente a uma API.
• Eles são criados seguindo uma convenção de nomenclatura de trabalho usando o sufixo .server.js após o nome do componente. Por exemplo, se o seu componente for denominado note.js , terá que ser note.server.js . Respectivamente, os componentes do cliente serão criados seguindo a convenção de nomenclatura usando o sufixo .client.js após o nome do componente.

React Server Components não resolve todos os problemas que temos agora. Aqui estão alguns recursos que os componentes do React Server não possuem:

• Os componentes do React Server não podem ter estado porque são executados uma vez por solicitação, então a ideia de usar ganchos React para lidar com dados de estado como useState e useReducer são não suportado
• Os componentes do React Server não podem usar os ganchos do React para renderizar métodos de ciclo de vida, como useEffect e useLayoutEffect
• Os componentes do React Server não podem usar APIs somente para navegador

Podemos criar componentes e ganchos React que podem ser usados ​​em nossos componentes de servidor e cliente. Ganchos são uma maneira muito simples e poderosa de compartilhar lógica entre componentes e ainda podemos fazer uso deles com componentes de servidor.

Devemos ter certeza de que estamos seguindo todas as restrições, incluindo:

• Não podemos fazer uso da lógica de estado usando ganchos como useState ou useReducer
• Não podemos usar fontes de dados do lado do servidor
• Não podemos usar ganchos personalizados que dependem de estado, efeitos ou APIs somente do navegador

Depois de seguir todas as restrições, podemos criar componentes e ganchos que podem ser usados ​​no servidor e no cliente.

O componente React tradicional é chamado de componente cliente, porque é renderizado no lado do cliente. Um componente cliente é o componente com o qual você está acostumado, ele pode lidar com dados de estado, pode funcionar com APIs somente para navegador, etc.

Os componentes do React Server podem processar componentes do servidor, elementos HTML nativos ou componentes do cliente. Vamos imaginar que temos um componente chamado CommentLikeButton , que é um componente cliente, podemos simplesmente importá-lo dentro de nosso componente de servidor e usá-lo sem nenhum problema:

 importar banco de dados de"banco de dados";
import CommentLikeButton de'CommentLikeButton.client'; Comentário const=(adereços)=> { const {id}=adereços; const comment=db.comments.get (id); Retorna ( 
 
 {comment.title} 
 
 {comment.body} 
  
 );
};

RSC vs. SSR

A renderização do lado do servidor é uma técnica para renderizar aplicativos no lado do servidor, enviando o HTML para o cliente e o HTML é renderizado pelo navegador. Esta é uma das duas vantagens mais importantes que os aplicativos renderizados do lado do servidor têm:

• Desempenho- o arquivo HTML que o cliente recebe já está cheio de conteúdo e pronto para ser renderizado, portanto, não há necessidade do navegador buscar qualquer JavaScript
• SEO- o desempenho de SEO aumenta devido ao JavaScript geralmente exige que os mecanismos de pesquisa gastem mais tempo renderizando o aplicativo. Uma vez que todo o conteúdo de que o cliente precisará é processado no servidor, o arquivo estará pronto para ser processado, resultando em uma busca de melhor classificação

Componentes de servidor são componentes processados ​​no lado do servidor, mas não como HTML. Os componentes do servidor são renderizados usando um formato especial que é transmitido para o cliente.
É assim que um componente React Server é renderizado:

O fluxo que o React Server Components usa para renderizar nossos componentes não tem um protocolo padrão por enquanto, mas se parece muito com o formato JSON.

Embora os componentes do React Server sejam muito poderosos, eles não substituirão os aplicativos renderizados do lado do servidor, existem algumas diferenças que precisamos discernir:

• Os componentes do React Server podem ser renderizados a qualquer momento, enquanto os aplicativos SSR podem ser convertidos, mas eles renderão novamente uma página HTML inteira e perderão seu estado de aplicativo (caso haja algum)
• Os componentes do React Server podem acessar fontes de dados do servidor, como microsserviços, funções, banco de dados de qualquer lugar na árvore, enquanto com aplicativos SSR, especialmente com Next, precisamos usar getServerProps () que só funciona no nível superior de nosso página

Na maioria das vezes, quando usamos a renderização do lado do servidor, usamos apenas uma vez para a renderização inicial. Os componentes do servidor podem ser reavaliados várias vezes para renderizar novamente nossos dados. Podemos recuperar nossos componentes de servidor regularmente e o servidor transmitirá as atualizações, sem perder nenhum dado de estado em nossos componentes de cliente.

Impacto dos componentes do React Server

Cada novo lançamento na comunidade de desenvolvimento da web pode mudar a maneira como estamos construindo e construiremos aplicativos modernos no futuro. Os desenvolvedores estão sempre procurando novas técnicas para melhorar seus aplicativos e, claro, os componentes do React Server podem trazer uma nova maneira de criar aplicativos modernos.

Sabemos que os componentes do React Server são diferentes dos aplicativos de renderização do lado do servidor, usamos um formato especial para renderizar e também podemos recuperar nosso componente quantas vezes quisermos para renderizar novamente nossos dados. Somente por esses dois recursos, podemos facilmente mudar toda a maneira como estamos construindo aplicativos React.

Com os componentes do React Server, podemos ter uma nova maneira de criar aplicativos modernos, misturando componentes renderizados do lado do cliente e do servidor, podemos ter apenas uma pequena parte de nossa interface do servidor renderizada usando os componentes do React Server e os outros componentes da IU peças usando componentes React tradicionais.

Embora seja uma tecnologia nova, os componentes do React Server têm muito potencial e recursos brilhantes que, sem dúvida, melhorarão a forma como os aplicativos modernos serão construídos no futuro, como tamanho zero do pacote, acesso a fontes de dados diretamente do servidor, integração com componentes do cliente, etc.

Conclusão

O React tem várias técnicas diferentes para criar aplicativos modernos e os componentes do React Server são uma técnica muito poderosa para renderizar componentes no lado do servidor e apenas enviar o conteúdo para o cliente. Como vimos, os componentes do servidor ainda são um pouco diferentes dos aplicativos renderizados do lado do servidor e têm alguns recursos diferentes. Os componentes do servidor ainda estão em pesquisa e desenvolvimento pela equipe React, mas podemos prever que o futuro é muito brilhante para os aplicativos React, permitindo que os desenvolvedores façam uma mistura de componentes renderizados do lado do servidor e do lado do cliente juntos, melhorando a experiência do cliente e o desempenho do aplicativo.

A postagem O que você precisa saber sobre React Server Components apareceu primeiro no LogRocket Blog .

Source link