{"id":48920,"date":"2024-08-28T07:00:00","date_gmt":"2024-08-28T14:00:00","guid":{"rendered":"https:\/\/dhblog.dream.press\/blog\/?p=48920"},"modified":"2025-01-16T16:07:41","modified_gmt":"2025-01-17T00:07:41","slug":"componentes-react-server","status":"publish","type":"post","link":"https:\/\/www-dev.dreamhost.com\/blog\/es\/componentes-react-server\/","title":{"rendered":"Componentes de React Server: El Futuro del Desarrollo con React"},"content":{"rendered":"\n

React ha sido una potencia para construir aplicaciones web durante los \u00faltimos diez a\u00f1os<\/a>.<\/p>\n\n\n\n

Todos hemos visto c\u00f3mo ha evolucionado, desde esos pesados componentes de clase hasta la elegancia de los hooks.<\/p>\n\n\n\n

\u00bfPero Componentes de Servidor en React (RSCs)?<\/p>\n\n\n\n

No creemos que nadie haya anticipado un cambio tan dram\u00e1tico en la forma en que React funciona.<\/p>\n\n\n\n

Entonces, \u00bfqu\u00e9 son exactamente los Componentes de Servidor en React? \u00bfC\u00f3mo funcionan? \u00bfY qu\u00e9 hacen de manera diferente que React no pod\u00eda hacer ya?<\/p>\n\n\n\n

Para responder a todas estas preguntas, repasaremos r\u00e1pidamente los fundamentos. Si necesitas refrescar la memoria, echa un vistazo a esta gu\u00eda sobre c\u00f3mo aprender React como principiante<\/a>.<\/p>\n\n\n\n

En este art\u00edculo, te explicaremos por qu\u00e9 necesit\u00e1bamos los Componentes de Servidor en React, c\u00f3mo funcionan y algunos de los principales beneficios de los RSCs.<\/p>\n\n\n\n

\u00a1Empecemos! <\/p>\n\n\n\n

\u00bfQu\u00e9 son los Componentes de Servidor en React?<\/h2>\n\n\n\n
\"El<\/figure>\n\n\n\n

Piensa en los Componentes de Servidor en React como una nueva forma de construir aplicaciones React. En lugar de ejecutarse en el navegador como los componentes t\u00edpicos de React, los RSCs se ejecutan directamente en tu servidor.<\/p>\n\n\n\n

\n

“Creo que los RSCs est\u00e1n dise\u00f1ados para ser la ‘componentizaci\u00f3n’ del back end, es decir, el equivalente en el back end de lo que React de SPA<\/a> hizo para el front end. En teor\u00eda, podr\u00edan eliminar en gran medida la necesidad de cosas como REST y GraphQL, lo que llevar\u00eda a una integraci\u00f3n mucho m\u00e1s estrecha entre el servidor y el cliente, ya que un componente podr\u00eda atravesar toda la pila.” \u2014 ExternalBison54 en Reddit<\/a><\/p>\n\n\n<\/blockquote>\n\n\n\n

Dado que los RSCs se ejecutan directamente en el servidor, pueden acceder de manera eficiente a recursos de back end como bases de datos y APIs<\/a> sin necesidad de una capa adicional de obtenci\u00f3n de datos.<\/p>\n\n\n\n

Pero, \u00bfpor qu\u00e9 necesit\u00e1bamos los RSCs de todos modos?<\/strong><\/p>\n\n\n\n

Para responder a esta pregunta, retrocedamos un poco.<\/p>\n\n\n\n

React Tradicional: Renderizado del Lado del Cliente (CSR) <\/h2>\n\n\n\n

React siempre ha sido una biblioteca de UI del lado del cliente.<\/p>\n\n\n\n

La idea central detr\u00e1s de React es dividir todo tu dise\u00f1o en unidades m\u00e1s peque\u00f1as e independientes que llamamos componentes. Estos componentes pueden gestionar sus propios datos privados (estado<\/strong>) y pasarse datos entre s\u00ed (props<\/strong>).<\/p>\n\n\n\n

Piensa en estos componentes como funciones de JavaScript<\/a> que se descargan y se ejecutan directamente en el navegador del usuario. Cuando alguien visita tu aplicaci\u00f3n, su navegador descarga todo el c\u00f3digo de los componentes, y React interviene para renderizar todo:<\/p>\n\n\n\n

\"Diagrama<\/figure>\n\n\n\n