React e Next.js: Server Components uma Nova Perspectiva no

ReactJS 29 de Nov de 2023

*Texto de Paulo Clemente
Desenvolvedor e redator de mídias sociais na Rocketseat

O React passou por uma significativa transformação nos últimos TRÊS anos, e muitos desenvolvedores ainda enfrentam desafios para se adaptar à nova arquitetura.

Este artigo explora os Server Components, introduzidos no final de 2020, e aborda questões comuns enfrentadas pelos desenvolvedores ao utilizar essa arquitetura.

O Que São Server Components?

1. Entendendo a Proposta da Arquitetura

A proposta dos Server Components é reduzir a quantidade de JavaScript enviado para o navegador ao construir aplicações React.

2. Erro Comum: Descuidando das Ações Essenciais

Muitos desenvolvedores cometem o erro de não dar a devida atenção às ações que realmente minimizam o JavaScript no lado do navegador.

Transição de Mindset: Da Teoria à Prática

3. Mudança Necessária no Mindset

Para migrar para essa nova arquitetura, é essencial entender a teoria por trás dos Server Components e estar disposto a mudar a forma de pensar.

4. Simples Uso com o Next.js

A forma mais simples de usar Server Components é criar um projeto com o Next.js a partir da versão 13 ou 14, utilizando a nova estrutura de pastas chamada "app folder".

npx create-next-app@latest

5. Server Components no Next.js: A Nova Estrutura de Pastas

Com o "app folder", todos os componentes criados no projeto são, por padrão, Server Components, processados apenas pelo lado do servidor.

Limitações e Soluções Práticas

6. Limitações dos Server Components

Server Components não têm funções de interatividade, o que implica que certas ações, como eventos de clique e submissão de formulários, não são suportadas.

7. Sinalizando Componentes Interativos com use client

Para lidar com a falta de interatividade, é crucial sinalizar quais componentes realmente precisam de JavaScript do lado do cliente usando a diretiva "use client". Assim iniciando o processo de hidratação código.

'use client'
 
import { useState } from 'react'
 
export default function Counter() {
  const [count, setCount] = useState(0)
 
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  )
}

Hidratação Controlada: Exemplos

8. Entendendo o Processo de Hidratação

O processo de hidratação é essencial para adicionar interatividade ao código da interface do componente. Vamos explorar dois exemplos práticos.

9. Exemplo 1: Encapsulamento de Client Components

Encapsular apenas a parte do componente que necessita de interatividade, evitando excesso de JavaScript no navegador.

Então, se só um componente da sua página precisa de interatividade então só ele precisa receber a diretiva do “use-client”. E, para fazer isso é só você encapsular esse componente que precisa de interatividade dentro de um novo arquivo um novo componente e finalmente a gente não tem excesso de JavaScript sendo enviado pro navegador.

10. Exemplo 2: Server Components Dentro de Client Components

Explorando a possibilidade de ter Server Components dentro de Client Components, oferecendo flexibilidade e otimizando o envio de código para o navegador.

A regra para isso é que os server components precisam ser enviados para o client component com a propriedade chidren

Exemplo:

'use client'
 
import { useState } from 'react'
 
export default function Dashboard({
  children,
}: {
  children: React.ReactNode
}) {
 
  return (
    <>
      {children}
    </>
  )
}

Pensando nesse exemplo, onde que você pode ver os server components em laranja e os client components em azul, a gente tem o melhor dos dois mundos.

E ainda podemos adicionar um provider de contexto envolto ao meu Dashboard que continua sendo um server 😉

Ao compreender a lógica por trás dos Server Components, os desenvolvedores podem aproveitar ao máximo essa arquitetura inovadora, combinando eficiência e interatividade de maneira inteligente.