Aumente o desempenho da aplicação React com componentes de servidor

Desde que o React se consolidou como uma ferramenta essencial no front-end moderno, as estratégias de renderização sempre foram um ponto de atenção na comunidade de desenvolvimento.

Tradicionalmente, um React Single-Page Application (SPA) começa por enviar um elemento <div> vazio para o browser, juntamente com um pacote JavaScript maior. Este pacote inclui o código do React e da aplicação, enquanto o cliente é responsável por: ir buscar os dados, processar a interface e torná-la interativa. Este processo é conhecido como Renderização do Lado do Cliente (CRS).

Embora funcional, esta abordagem pode resultar em tempos de carregamento lentos e num desempenho abaixo do esperado, especialmente em dispositivos mais limitados.

Felizmente, o React envolveu e incorporou contribuições significativas da comunidade para melhorar o desempenho da renderização. Uma dessas inovações foram os React Server Components (RSCs), que oferecem uma forma de renderizar partes da interface no servidor, reduzindo o trabalho no cliente.

O que são Componentes de Servidor React?

Os Componentes de Servidor React permitem criar componentes que são executados e renderizados no servidor, enquanto outros permanecem no cliente para lidar com a interatividade. Introduzem uma nova camada de eficiência ao combinar os benefícios da renderização no servidor e no cliente.

Com os Componentes de Servidor, são processadas lógicas como a pesquisa ou a formatação de dados no servidor. Isto elimina a necessidade de idas e vindas desnecessárias entre o cliente e o servidor, fornecendo HTML pré-renderizado e otimizando o desempenho.

Exemplo básico de um Componente de Servidor:

import fetchDataFromAPI from './api';

export default async function ServerComponent() {
  const data = await fetchDataFromAPI();

  return (
    <div>
      <h1>Data from the server:</h1>
      <ul>
        {data.map((item) => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
}

Este componente vai buscar os dados ao servidor e retorna um HTML já pronto, reduzindo a carga no cliente.

Vantagens dos Componentes de Servidor React

Melhor desempenho

Reduz o tamanho do JavaScript enviado para o cliente, reduzindo o tempo de carregamento inicial.

Elimina a necessidade de "hidratação" completa do HTML renderizado no servidor.

SEO otimizado

Como o HTML é gerado no servidor, os motores de busca conseguem indexar as páginas de forma eficiente.

Maior segurança

As informações confidenciais, como os tokens de autenticação, permanecem no servidor e não são expostas ao cliente.

Desenvolvimento simplificado

A lógica centralizada de pesquisa e transformação de dados no servidor reduz a complexidade para o cliente.Differences between Server Components and Client Components

Componentes do Servidor:

• Executam no servidor.

• Não têm acesso ao DOM ou às APIs do browser (por exemplo, janela ou documento).

• Perfeitos para operações como a pesquisa de dados e a geração de conteúdos estáticos.

Componentes do Cliente:

• Executam no cliente.

• Tratam da interatividade, como eventos e formulários do cliente.

• Podem consumir Componentes do Servidor para apresentar conteúdo pré-renderizado.

Exemplo de integração:

// ServerComponent.tsx
import ClientComponent from "./ClientComponent";

interface Item { id: number; title: string; }

export default async function ServerComponent() {
  const data: Item[] = await fetch('https://api.example.com/data').then((res) => res.json());
  return (
    <div>
      <ClientComponent data={data} />
    </div>
  );
}

// ClientComponent.tsx
import { useState, useEffect } from 'react';
import ServerComponent from './ServerComponent';

interface Item { id: number; title: string; } 
interface ClientComponentProps { data: Item[]; } 

export default function ClientComponent({ data}: ClientComponentProps) {
   const [items, setItems] = useState<Item[]>([]); 

   useEffect(() => { 
setItems(data) 
   }, [data]);

  return (
<ul> 
  {items.map((item) => ( 
    <li key={item.id}>{item.title}</li> 
   ))} 
</ul>
  );
}

No exemplo acima, o componente cliente apresenta a lista de itens assim que os dados são recebidos do servidor e armazenados no estado local.

Boas Práticas

Divisões claras de responsabilidades

Utilize Componentes de Servidor para tarefas não interativas e Componentes de Cliente para manipulação do DOM.

Evite rerenderizações desnecessárias

Planeie a hierarquia de componentes para minimizar o trabalho do cliente

Teste e monitorização

Utilize ferramentas como o React DevTools para identificar os pontos de estrangulamento e otimizar o desempenho.

Segurança

Valide e higienize sempre os seus dados no servidor para evitar vulnerabilidades.

Conclusão

Os Componentes React Server representam uma evolução significativa na forma como criamos aplicações web. Permitem-nos combinar o melhor dos dois mundos: eficiência e simplicidade no servidor com interatividade e dinamismo no cliente.

Adotar esta abordagem pode não só melhorar o desempenho do seu projeto, como também simplificar a sua arquitetura. Experimente incorporar Componentes de Servidor no seu próximo projeto e aproveite os benefícios de uma web mais rápida e eficiente.