React Server Components: A Comprehensive Guide

React Server Components: A Revolução que Você Precisa Entender

Server Components mudaram fundamentalmente como pensamos em React. Veja por que isso importa.

O Problema que Resolve

React tradicional envia TODO código JavaScript para o cliente:

• Bundle grande (300-500kb comum)
• Waterfall requests (dados após JS carregar)
• Hidratação lenta em mobile

Como Server Components Funcionam

Componentes renderizam no servidor e enviam HTML:

```tsx

// Server Component (padrão no Next.js 13+)

async function BlogPost({ id }: { id: string }) {

// Fetch direto no componente, no servidor!

const post = await db.post.findUnique({ where: { id } })

return

{post.content}

}

```

Vantagens:

• Zero JavaScript enviado para este componente
• Acesso direto a banco de dados
• Secrets seguros (nunca vazam para cliente)

Quando Usar Client Components

Ainda precisa de Client Components para:

• Interatividade (onClick, onChange)
• Hooks (useState, useEffect)
• Browser APIs (localStorage, window)

```tsx

'use client' // Marca explicitamente

export function Counter() {

const [count, setCount] = useState(0)

return setCount(count + 1)}>{count}

}

```

Padrão de Composição

O poder está em combinar ambos:

React Server Components

React Server Components are a new feature in React that allows you to render components on the server and send them to the client. This can improve performance and user experience by reducing the amount of JavaScript that needs to be sent to the client.

What are Server Components?

Server Components are components that are rendered on the server. They can fetch data, perform computations, and render HTML, all on the server side. This means that the client receives pre-rendered HTML, which can be displayed immediately.