El equipo tras React no encontró mejor manera de terminar el año que dejando a la comunidad de desarrolladores con ansiedad por obtener una nueva característica en la ya prominente librería.
El 21 de Diciembre se publicó la grabación de una charla en donde Dan Abramov, Lauren Tan, Joseph Savona, y Sebastian Markbåge, explican el razonamiento trás esta característica y algunos casos de uso.
Cabe destacar que esta característica es aún completamente experimental y no tiene documentación más allá del RFC publicado por el equipo.
Estamos compartiendo este trabajo en el espíritu de la transparencia y para obtener opiniones y comentarios de la comunidad de React. Tendremos mucho tiempo para ello, no te sientas precionado de hacerlo ahora mismo.Versión original en ingles
We are sharing this work in the spirit of transparency and to get initial feedback from the React community. There will be plenty of time for that, so don’t feel like you have to catch up right now!
Entonces ¿de que se trata?
Comencemos por aclarar algunos términos y así diferenciar esta nueva propuesta de algunas técnicas que ya están disponibles hoy en día.
Es similar a server-side rendering (SSR renderizado en el lado del servidor) pero funciona diferente. SSR es tomar un componente React y hacer que el servidor renderice su contenido al recibir una petición generando así un string de HTML que se envía al navegador para que lo muestre, después se carga el javascript necesario y se vuelve al ciclo estándar de una aplicación Client Side Rendering.
Similar a lo que hace Next.js con getInitialProps, los Server Components pueden obtener datos y pasar esa información a los componentes del cliente, sin embargo, a diferencia de esta técnica de SSR, los Server Components son más "dinámicos". Es posible obtener un árbol de componentes desde el servidor e inyectarlo en la aplicación cliente sin perder el estado del cliente.
Otra diferencia es que con SSR, el código javascript genera y renderiza un string HTML en el servidor, creando así la parte visible del sitio web a modo de template HTML. Este template es enviado al cliente junto al código javascript necesario para habilitar interactividad, permitiendo una carga inicial muy veloz, pero con interactividad que puede tomar algo más de tiempo en el proceso de hidratación.
Server Components
La nueva técnica e implementación presentada complementa SSR habilitando el renderizado por medio de una abstracción intermedia sin la necesidad de agregar javascript al bundle inicial de tu aplicación.
Pero ten en cuenta que Server Componentes no buscan ser un reemplazo para SSR, sino más bien, para ser utilizados en conjunto. Utiliza SSR para los componentes del cliente, consiguiendo así una disminución significativa en el tamaño del bundle. Los primeros experimentos del equipo de React pudieron medir una disminución ente 18% y 29%.
[RFC]: If we migrate the above example to a Server Component we can use the exact same code for our feature but avoid sending it to the client - a code savings of over 240K (uncompressed):
¿Será Next.js reemplazado por Server Components?
No. Son implementaciones y soluciones diferentes. La adopción inicial de SC muy probablemente será inicialmente realizada por frameworks como Next y Gatsby.
- El código de SC nunca llega al cliente. Las implementaciones de SSR que utilizando React, el código del componente es enviado al cliente en el bundle aumentando la cantidad de código que el browser necesita parsear y ejecutar.
- SC permiten acceder al backend en cualquier parte del árbol de componentes. Al utilizar soluciones cómo Next.js puedes acceder a datos del backend de forma limitada al utilizar el método getServerProps() que a su vez tiene la limitación de solo poder utilizarse en una página de primer nivel, no puedes obtener datos del servidor desde cualquier otro componente o incluso de algún paquete de npm.
- SC pueden ser re-obtenidos mientras se mantiene el estado del cliente dentro del árbol. Esto es porque el mecanismo de transporte utilizado no es simple HTML, sino más bien un objeto similar a la definición de un node dentro del árbol de componentes.
¿Quieres saber más?
Te recomiendo ver la charla original, leer el RFC y revisar el demo de la propuesta.
Y recuerda, no necesitas utilizar ni aprender esta propuesta ahora, y probablemente tampoco será pronto, pero si es adecuado mantener esta propuesta en tu visión periférica.
? Sígueme en Twitter ✉️ Únete al newsletter ❤️ Apoya mi trabajo