{"id":54931,"date":"2024-08-28T07:00:00","date_gmt":"2024-08-28T14:00:00","guid":{"rendered":"https:\/\/dhblog.dream.press\/blog\/?p=54931"},"modified":"2025-05-26T12:23:27","modified_gmt":"2025-05-26T19:23:27","slug":"componentes-de-servidor-react","status":"publish","type":"post","link":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/componentes-de-servidor-react\/","title":{"rendered":"Componentes de Servidor React: O Futuro do Desenvolvimento em React"},"content":{"rendered":"

React tem sido uma pot\u00eancia para o desenvolvimento de aplicativos web nos \u00faltimos dez anos<\/a>.<\/p>\n

Todos n\u00f3s vimos evoluir daquelas componentes de classe pesadas para a eleg\u00e2ncia dos hooks.<\/p>\n

Mas os Componentes de Servidor React (RSCs)?<\/p>\n

N\u00e3o achamos que algu\u00e9m esperava uma mudan\u00e7a t\u00e3o dram\u00e1tica no funcionamento do React.<\/p>\n

Ent\u00e3o, o que exatamente s\u00e3o Componentes de Servidor React? Como eles funcionam? E o que eles fazem de diferente que o React j\u00e1 n\u00e3o poderia fazer?<\/p>\n

Para responder a todas essas perguntas, vamos revisar rapidamente os fundamentos. Se voc\u00ea precisa de uma revis\u00e3o, d\u00ea uma olhada r\u00e1pida neste guia sobre como aprender React como iniciante<\/a>.<\/p>\n

Neste post, vamos explicar por que precis\u00e1vamos dos Componentes de Servidor React, como eles funcionam e alguns dos principais benef\u00edcios dos RSCs.<\/p>\n

Comece Agora!<\/p>\n

O que s\u00e3o Componentes de Servidor React?<\/h2>\n
\"Diagrama<\/figure>\n

Pense nos Componentes de Servidor React como uma nova maneira de construir aplica\u00e7\u00f5es React. Em vez de executarem no navegador como os componentes React t\u00edpicos, os RSCs executam diretamente no seu servidor.<\/p>\n

\u201cEu acho que os RSCs s\u00e3o projetados para ser a “componentiza\u00e7\u00e3o” do backend, ou seja, o equivalente no backend do que o SPA React<\/a> fez pelo frontend. Em teoria, eles poderiam eliminar em grande parte a necessidade de coisas como REST e GraphQL, levando a uma integra\u00e7\u00e3o muito mais estreita entre o servidor e o cliente, j\u00e1 que um componente poderia atravessar toda a pilha.\u201d \u2014 ExternalBison54 no Reddit<\/a><\/p><\/blockquote>\n

Como os RSCs s\u00e3o executados diretamente no servidor, eles podem acessar de maneira eficiente recursos do backend como bancos de dados e APIs<\/a> sem uma camada adicional de busca de dados.<\/p>\n\n\n\n

\n\t\n\t\t<\/svg>\n\t\t<\/span>\n\t\t<\/svg>\n\t<\/a>\n

API<\/h3>\n

Uma Interface de Programa\u00e7\u00e3o de Aplica\u00e7\u00f5es (API) \u00e9 um conjunto de fun\u00e7\u00f5es que permite que aplica\u00e7\u00f5es acessem dados e interajam com componentes externos, atuando como um mensageiro entre o cliente e o servidor.<\/p>\n \n Leia Mais <\/a>\n\n<\/div>\n\n

Mas por que precis\u00e1vamos dos RSCs afinal?<\/strong><\/p>\n

Para responder a essa pergunta, vamos voltar um pouco.<\/p>\n

React Tradicional: Renderiza\u00e7\u00e3o no Lado do Cliente (CSR)<\/h2>\n

O React sempre foi uma biblioteca de interface de usu\u00e1rio do lado do cliente.<\/p>\n

A ideia principal por tr\u00e1s do React \u00e9 dividir todo o seu design em unidades menores e independentes que chamamos de componentes. Esses componentes podem gerenciar seus pr\u00f3prios dados privados (state<\/strong>) e passar dados uns para os outros (props<\/strong>).<\/p>\n

Pense nestes componentes como fun\u00e7\u00f5es JavaScript<\/a> que s\u00e3o baixadas e executadas diretamente no navegador do usu\u00e1rio. Quando algu\u00e9m visita seu aplicativo, o navegador dessa pessoa baixa todo o c\u00f3digo do componente, e o React entra em a\u00e7\u00e3o para renderizar tudo:<\/p>\n

\"Fluxograma:<\/figure>\n