O que são React Server Components?
Nos últimos dias o React Server Components vem sendo bem falado pela comunidade em geral, mas você sabe o que é isso, para que serve e qual dor ele vem resolver? Vem comigo que vou te explicar tudo o que você precisa saber sobre o RSC.
Antes de mais nada, o que é React Server Componentes?
O React Server Components (RSC) permite que o servidor e o cliente (navegador) trabalhem juntos na renderização da aplicação. Ele permite que alguns componentes sejam renderizados no servidor e outros no navegador, otimizando assim o desempenho de renderização e tamanho do JavaScript que é enviado para o cliente. O RSC é uma nova funcionalidade que permite que diferentes componentes sejam renderizados em diferentes momentos, tornando a renderização mais eficiente e melhorando a experiência do usuário.
A equipe do React ilustrou esse processo com um exemplo que mostra componentes laranjas sendo renderizados no servidor e componentes azuis sendo renderizados no navegador:
O RSC não é a mesma coisa que SSR (Server-side rendering), podem parecer iguais, mas são coisas diferentes. E ambos podem ser utilizados em conjunto.
O SSR funciona renderizando o HTML no servidor antes de enviá-lo para o navegador. No entanto, a interatividade é limitada, já que a maior parte da lógica é executada no cliente. Com o RSC, alguns componentes são renderizados no servidor e outros no cliente, permitindo uma renderização mais rápida e uma interatividade mais avançada. Nesse momento vamos ignorar o SSR e focar apenas no RSC, ele pode ser um assunto para outro post.
Resumindo, os React Server Components combinam a interatividade robusta dos aplicativos do lado do cliente com o desempenho melhorado da renderização do servidor.
Para que utilizar o RSC?
Antes do surgimento do React Server Components, todos os componentes React eram “clientes” e eram executados no navegador. Quando um usuário visitava uma página, o navegador baixava o código para todos os componentes necessários, construía a árvore de elementos React e a renderizava para a DOM.
Isso permitia que o aplicativo fosse interativo, com a possibilidade de instalar manipuladores de eventos, monitorar o estado, atualizar a árvore React em resposta a eventos e atualizar o DOM eficientemente.
No entanto, há situações em que a renderização no servidor pode ser útil, por exemplo, para melhorar o desempenho de carregamento da página, ou para cenários de pré-renderização de conteúdo dinâmico. O RSC é uma extensão do modelo de programação do React que permite que alguns componentes sejam renderizados no servidor e outros no cliente, otimizando a renderização para melhorar o desempenho e a experiência do usuário.
E renderizar componentes do lado do servidor tem algumas vantagens como:
- O servidor tem acesso a mais recursos como bancos de dados, sistema de arquivos entre outros.
- O servidor pode buscar diretamente os dados de que você precisa sem precisar passar por alguma API possibilitando que a busca dos dados seja mais rápido do que no cliente.
- Uma das vantagens de renderizar componentes no servidor é que as dependências como os módulos do NPM não precisam ser baixadas toda vez que são usadas, o que é diferente do navegador que precisa baixar todo o código JavaScript sempre que é necessário. Isso significa que a renderização no servidor pode melhorar o tempo de carregamento e o desempenho.
- Melhor segurança: o uso de RSCs pode melhorar a segurança do aplicativo, podendo limitar a exposição do código JavaScript do cliente, reduzindo o risco de ataques de injeção de código malicioso.
Algumas outras vantagens e desvantagens:
Como implementar o React Server Components
Antes de prosseguirmos, vamos esclarecer como diferenciar os componentes do servidor de componentes do cliente.
De acordo com a equipe do React, essa distinção é baseada na extensão do arquivo do componente: se o arquivo termina com .server.jsx ele contém componentes de servidor, quando termina com .client.jsx, contém componentes do cliente. Quando o arquivo não apresenta nenhuma das extensões, significa que o componente pode ser utilizado tanto no servidor quanto no cliente.
Exemplo de um React Server Components:
// MyServerComponent.server.jsx
export default function MyServerComponent() {
return <span>Este é um componente renderizado do lado do servidor</span>;
}Um exemplo de um componente de cliente:
// MyClientComponent.client.jsx
export default function MyClientComponent({children}) {
return (
<div>
<h1>Este é um componente renderizado do lado do cliente</h1>
<div>
{children}
</div>
</div>
);
}Agora juntando os dois mundos:
// MyOuterServerComponent.server.jsx
import MyClientComponent from './MyClientComponent.client';
import MyServerComponent from './MyServerComponent.server';
export default function MyOuterServerComponent() {
return (
<MyClientComponent>
<MyServerComponent />
</MyClientComponent>
);
}Como você pode observar, o MyOuterServerComponent pode renderizar tanto componente do lado do servidor como componentes do cliente.
Posso renderizar um componente do servidor no cliente?
Não, você não pode renderizar um componente do servidor diretamente no lado do cliente. O React Server Components é projetado para permitir que o servidor e o cliente colaborem na renderização de uma aplicação React, mas a renderização real de cada componente deve ocorrer no ambiente adequado (ou seja, no servidor ou no cliente). Tentar renderizar um componente do servidor no lado do cliente resultará em um erro.
Você pode estudar mais sobre o React Server Components através desse repositório demo criado e mantido pelo time do React disponível no GitHub: https://github.com/reactjs/server-components-demo
Mas e aí, vale a pena?
Vantagens:
- Separação clara de responsabilidades entre lógica de cliente e servidor.
- Código somente de servidor reduz o tamanho dos pacotes, sem impacto no pacote do cliente.
- Acesso direto a fontes de dados privadas como data bases no lado do servidor.
- Integração suave com componentes do cliente.
- Hidratação progressiva e renderização em streaming.
- Atualizações de subárvore e componentes preservam o estado do cliente, incluindo estado, foco e animações.
- Compartilhamento de código entre servidor e cliente quando apropriado.
Desvantagens:
- Componentes do servidor não têm acesso ao estado gerenciado por Hooks, como useState e useReducer.
- Hooks para ciclo de vida como useEffect e useLayoutEffect não funcionam com React Server Components.
- APIs do navegador não podem ser utilizadas em componentes do servidor.
Opinião pessoal:
Acredito muito no potencial do React Server Components, creio que ele irá melhorar muito nossas aplicações React, porém não acredito que seja ideal utilizar ele para realizar tarefas de uma API, mesmo sendo possível! Gosto da ideia de manter a separação entre responsabilidades de Backend e Frontend. Podemos utilizar o RSC para melhorar a velocidade de carregamento e processamento das nossas aplicações, diminuindo a quantidade de loadings e JavaScript no lado do cliente.
Mas e aí, qual a sua opinião sobre essa nova funcionalidade? Deixe aí nos comentários!
Bom, é isso, espero que tenha gostado! E se tiver alguma sugestão deixe aí nos comentários 💬
Se gostou, dê 1 ou 50 claps 👏
Obrigado pela leitura!
Me acompanhe por aí! 😜
- Portfólio: vinniciusgomes.com
- GitHub: @vinniciusgomes
- LinkedIn: @vinniciusgomes
