71

React Server Components es una revolución para el Desarrollo Web

211928Puntos

hace 3 años

React Server Components nos ayuda a construir interfaces con buena UX de forma rápida, mantenible y por un bajo costo de desarrollo. Revoluciona el desarrollo web porque es un nuevo modelo para crear, separar y conectar los componentes de nuestra aplicación con React considerado su conexión con el servidor.

Evolución de los tipos de componentes en React: Stateful Components vs. Stateless Components ⚛

Siempre ha sido una buena práctica separar a nuestros componentes entre UI Components o Container Components.

  • Los componentes contenedores definen la lógica del componente, intercambian datos con el backend, guardan esa información en el estado y se la pasan “reactivamente” a los componentes visuales por medio de props.
  • Y en los componentes visuales maquetamos la interfaz del componente, que puede cambiar un poco dependiendo del valor de las props que nos envían los componentes contenedores.

En el pasado, los componentes contenedores solo se podían crear con clases, ya que las funciones no podían tener estado ni ciclo de vida. Pero con React Hooks ya no existe esta limitación. En el desarrollo moderno con React los componentes visuales y contenedores pueden crearse con clases o también con funciones.

Pero ¿qué tiene esto que ver con React Server Components?

Esta nueva propuesta nos presenta otra forma de separar componentes. Seguimos evaluando si nuestros componentes tienen estado o no, pero ahora también consideramos la conexión que tienen nuestros componentes con el servidor y el tipo de renderizado de nuestra aplicación.

Qué es memoization

Tipos de render y conexión de los componentes con el servidor 💻

El frontend de una página web puede tener diferentes tipos de render:

  • Client Side Rendering (Single Page Applications o SPAs): el servidor le entrega al navegador un documento HTML en blanco y un bundle o archivo JavaScript que renderizará toda la aplicación en el lado del cliente, podrá cambiar el contenido dinámicamente dependiendo de las interacciones del usuario (sin necesidad de refrescar la página) y hará peticiones a alguna API cuando el sitio así lo requiera.
  • Server Side Rendering o SSR: el servidor le entrega al navegador un documento HTML con toda la información de una página en específico, pero no permite interactuar con los usuarios o cambiar de páginas dinámicamente, por lo que cada nueva solicitud implica volver a cargar la página para que el servidor entregue un nuevo documento HTML con la nueva información.
  • Static Sites Generation: la aplicación funciona con server side rendering durante su etapa de desarrollo, pero cuando compilamos y enviamos a producción funcionará como una SPA con todo el contenido no dinámico de la página precargado.

Single Page Applications vs. Server Side Rendering vs. Generadores de Sitios Estáticos

El server side rendering moderno con React combina lo mejor del SSR y las SPAs. Nuestros componentes se renderizan en el servidor y cuando llegan al navegador se “hidratan”, se vuelven a renderizar en el cliente para permitir una alta interactividad como una buena SPA.

También está el progressive server side rendering, donde podemos elegir qué componentes se renderizan tanto en el servidor como en el cliente o únicamente en el cliente.

React Server Components es un nuevo modelo de render. Podemos definir cuáles componentes deben renderizarse solo en el servidor, sin necesidad de hidratarse en el navegador, y cuáles otros se deben renderizarse en el cliente porque tienen estado para manejar la interactividad con los usuarios.

Server Components provide modern UX with a server-driven mental model
– Dan Abramov

Este nuevo modelo tiene muchas ventajas. Nuestros server components no afectarán en el peso del archivo final de JavaScript para el navegador. Y en vez de hacer peticiones al servidor desde el cliente, podemos hacer estas peticiones directamente desde los server components, así que la solicitud tardará mucho menos en ejecutarse y nuestra aplicación será mucho más rápida.

Esto en idioma React lo llamaremos Zero-Bundle-Size-Components y Server-Components with full backend access.

Para profundizar en el tema, te recomendamos los cursos de desarrollo web de Platzi.

¿Y cómo lo hacen? ¿Cómo funciona React Server Components internamente? 🔁

En la presentación de React Server Components con Dan Abramov y Lauren Tan, compartieron un principio de la gestión de proyectos que también aplica al desarrollo web. Nuestras aplicaciones suelen tener solo dos de los siguientes 3 atributos:

  • Good: nuestro producto mantiene una muy buena UX, por ejemplo, el contenido no aparece por pedacitos haciéndonos dar scroll porque aparecieron nuevos elementos que tardaron más en cargar que el resto de la app.
  • Fast: nuestra aplicación es rápida, tiene una buena performance, no tarda mucho tiempo en renderizarse por completo ni actualizar la información que requieren los usuarios dinámicamente.
  • Cheap: nuestro código es poco costoso de mantener, no necesitamos manejar herramientas ni desarrollar código extremadamente complejo para que la aplicación funcione correctamente.

Hay muchas herramientas y estrategias para reducir el impacto de no contar con los 3 atributos en nuestros proyectos, como GraphQL y los loading-skeletons o animaciones de carga. Y para muchas aplicaciones pueden funcionar muy bien, pero todavía no contamos con una herramienta o modelo que resuelva el problema de raíz, solo son parches o soluciones que aumentan mucho la complejidad de nuestra app.

Es por esto que el grupo de Facebook encargado de desarrollar React unió esfuerzos con otros equipos como el de Google Chrome y Next.js para investigar, hacer experimentos y construir React Server Components, una solución core de React que aproveche al máximo los protocolos web y funcione sin necesidad de frameworks.

Están desarrollando plugins para Webpack y Parcel, un sistema o protocolo de transmisión para conectar los componentes de servidor con los componentes del navegador sin perder interactividad, librerías muy livianas para facilitar la conexión de los server components con la fuente de datos de nuestro backend…

¡Este proyecto es una maravilla! 😻

Storybook: Una forma de organizar tus componentes de React, Angular o Vue.

¡Nuevo Curso Profesional de React Ser…! Ah, no, aún es muy pronto 😅

React Server Components todavía está en construcción. El demo y propuestas del equipo de React son muy prometedoras, pero todavía no es buena idea implementarlo en proyectos reales ni crear cursos de esta nueva tecnología.

Lo que sí puedes hacer es experimentar. Clona el demo de React Server Components y prueba todo lo que puedes hacer con ellos. Además, en lo que lanzan esta nueva característica oficialmente, aprende todo lo que puedas sobre React, incluso sus características más nuevas, como React Hooks y React Suspense.

Si quieres aprender React desde cero, te invito a tomar la Carrera de Frontend con React.js. Y si quieres aprender a construir una aplicación profesional integrando herramientas super populares como Strapi, Google Maps y PayPal, te invito a tomar el Curso Profesional de React Hooks en Platzi.

#NuncaParesDeAprender

Juan
Juan
juandc

211928Puntos

hace 3 años

Todas sus entradas
Escribe tu comentario
+ 2
Ordenar por:
9
29642Puntos

Siendo honesto y lo que podemos obtener con esta tecnología que nos propone React siento que no es algo que rompa la pared del desarrollo son cosas que ya se ha podido realizar con PHP por ser un lenguaje interprete, igual me puedo estar equivocando.

2
17236Puntos
3 años

No te equivocas.

3

Una pregunta, ¿ustedes que recomiendan más, React o Next? Hace poco hice un proyecto con NextJS y vi que hay muchas cosas que se parecen a React. Y quería darle una estudiada más amplia a este, pero justo estaba viendo, en youtube, esto que mencionan en este post.
Gracias.

5
211928Puntos
3 años

Hola, Antonio. Next es un framework que usa React.js por dentro. Te recomiendo que tomes primero los cursos de React y luego el de Next. 😉

0
22076Puntos
3 años

También un concejo antes de empezar con React tener buenos conocimientos y bases de JavaScript, saludos.

2
4Puntos

Bueno a aprender se ah dicho

1
17236Puntos

Voy a tomar este post como modelo. Su estructura es súper clean. Bien ahí, @juandc.