Vou ter que escrever SQL nos meus componentes React?

Como a única coisa que move a internet é polêmica, ontem pegaram essa imagem do Sam Selikoff na Next Conf e descontextualizaram pra gerar tretas.

Eu estou estudando o Next 13+ e usando pra algumas aplicações pessoais há algum tempinho, resolvi fazer esse post aqui pra explicar melhor.

O React 18 introduziu o conceito de Server Components (RSC), que basicamente é você escrever um componente que roda no lado do servidor. Ou seja, em uma runtime NodeJS.

É um pouco confuso, mas a ideia é que o servidor vai interpretar esse componente e gerar um HTML pra enviar pro client (parecido com Server Side Rendering), só que ao invés de enviar uma string que vai ser "hidratada" no client, os Server Components conseguem retornar componentes pra serem "reconciliados" no front.

Isso traz alguns benefícios como:

• ✅ Facilidade de cachear no servidor
• ✅ Mais segurança por evitar expor API keys no lado do client
• ✅ Performance de data fetching, já que você vai estar dentro do servidor, não precisa de uma requisição HTTP pra outro endereço pra buscar seus dados
• ✅ Menos JS enviado pro client: como muita coisa vai estar no servidor, vc não precisa enviar o JS, basta enviar os dados processados.

Vale destacar que essa é uma mudança no React e o Next foi o primeiro framework a implementar.

Desde que os RSC foram lançados, tem rolado muita polêmica na comunidade, porque muda bastante o "paradigma" do React e além disso eles foram lançados de forma meio "instável" e com muitos bugs no NextJS.

Na minha humilde opinião, eu achei bem complexo, principalmente pra quem ta começando. Você adiciona mais uma camada de complexidade pra aprender: SSR, SPA, RSC, etc. As diferenças entre cada uma são sutis e fica difícil entender o que você deve usar pra cada cenário. Como toda tecnologia, tem suas vantagens e desvantagens.

🤡 Agora sobre a polêmica

Só porque você pode rodar SQL direto do seu componente, não quer dizer que você deva. Esse foi um exemplo extremo pra ilustrar as capacidades do framework.

Todo mundo que usa React sabe que você tem que tomar várias decisões arquiteturais pra criar seus apps. No client-side você já pode fazer uma requisição pra um banco de dados direto do clique do botão, mas você vai organizar isso em uma estrutura melhor.

Nos Server Components é a mesma coisa. Você pode separar essa chamada pro SQL em uma camada de Services e ta resolvida a polêmica.

Aprenda sobre React Server Components

Se você se interessou por esse assunto, temos um workshop que entra no detalhe sobre como os React Server Components funcionam.

🔗 Link aqui