Componentes del Servidor: La Épica Historia de Renderizar UX

Hola a todos. Hoy, hablaré sobre una de las cosas más geniales en las que React ha estado trabajando, que son los componentes del servidor. Profundizaremos en diferentes conceptos, pero explicaré las cosas de una manera un poco más divertida. Sin más preámbulos, intentemos ver lo que planeamos cubrir en esta charla.

Podrías estar pensando, ¿qué nos va a contar este chico? ¿Qué son los componentes del servidor? ¿Cómo funcionan? Blah, blah, blah. Pueden ser mil cosas. Solo diría, para esta charla, porque quiero mantener el tema de la charla como simplicidad. Solo tengamos una agenda en nuestra charla actual, que es solo una pequeña historia, e intentemos descubrir cosas basadas en la pequeña historia misma.

Muy bien. Entonces, antes de sumergirnos, un poco sobre mí. Soy Nikhil, y trabajo como ingeniero de software aquí en Postman. Usualmente trabajo en cosas súper divertidas como los sistemas de diseño y la base general de la experiencia del usuario que hemos establecido aquí en el producto, así que trabajo en los detalles y piezas de todas estas cosas. Sí, aparte de eso, me encanta hablar sobre todo lo que está haciendo la web y hacia dónde se dirige en general. Entonces me encanta hablar sobre performance. Me encanta hablar sobre cómo va el front end y qué novedades están surgiendo. Entonces, sí, si quieres, si eres un geek, como un tipo de geek como yo, entonces me encantaría conectarme en Twitter, en GitHub. Puedes encontrar todas estas manijas que definitivamente compartiré con todos ustedes. Entonces, sí, realmente me encantaría conectarme con todos ustedes.

Entonces, bien, ahora lleguemos a la parte divertida. Ahora comencemos una historia con un chico llamado Bob. Ahora, Bob es una persona que está en una playa y, como por accidente, no tiene nada para crear un castillo de arena en la playa. Le encanta construir castillos de arena. Pero lo que tiene que hacer es ver, está bien, hay arena y solo necesito usar mis manos, como solíamos hacer en la infancia, ¿verdad? Entonces, necesitamos, como él solo necesita construir este tipo de cosas con solo algunas manos.

Entonces, la responsabilidad de construir el castillo de arena es probablemente solo de Bob. Tiene que averiguar esa cosa. No tiene nada para ayudarlo. Ahora, con este comienzo de la historia, esto es lo que verías, si te relacionas con ello, verías, así es como funciona la representación del lado del cliente en este momento, ¿verdad? Tendrás un servidor y tendrás a alguien como un cliente que va a solicitar al servidor que haga algo. En este caso, como Bob quiere construir un castillo de arena, tal vez, ya sabes, un cliente quiere construir una página web. Así que lo solicita al servidor. El servidor va a darle una respuesta, que es, ya sabes, una lista, como archivos JavaScript, le va a dar archivos HTML y CSS. Y es responsabilidad del cliente, como, ya sabes, Bob es, era responsabilidad de Bob que él tiene toda la arena y lo que está a su disposición y tiene que averiguar cómo construir un castillo de arena. Así es también lo que hace el navegador. El navegador crea básicamente el sitio web final. Y como cuando todo está listo, esto es lo que ves en tu página, ¿verdad? Así que, bastante simple.

Ahora pasemos al siguiente paso de la historia. Ahora el siguiente paso sería que Bob recuerda, oh, no tengo nada, así que déjame pedir ayuda. Así que Bob recibe ayuda de su hermana, Sarah. Ahora, Sarah tiene como, Sarah también está muy apasionada por construir castillos de arena en la playa y como ella está muy bien equipada. Ella tiene como, como estos buenos conjuntos de herramientas, como sabes, una pala, como, como una cesta y como ella puede hacer cosas como muy, muy rápidamente y fácilmente. Así que Bob recibe su ayuda. Y ahora como Bob simplemente da todo como una responsabilidad a Sarah. Y él dice, como, sí, construye el castillo por mí y como yo solo lo usaré. Y ahora si entiendes la analogía, esto es ahora lo que es SSR, ¿verdad? Así que SSR o server side rendering es donde le dices al servidor que no quiero hacer cosas yo mismo, más bien, por favor ayúdame a construir el sitio web por mí. ¿Verdad? Así que ahora cómo diferirá en el en, en términos de la línea de tiempo es ahora cada vez que estoy solicitando al servidor un sitio web o como una página web. El servidor no me está dando los recursos como HTML y CSS. Lo que está haciendo es como está creando la salida final de HTML en el servidor en sí. Y obtengo esa salida de HTML en el cliente. Ahora cuando obtengo esa salida de HTML, uso como, como ahora entonces como ahora veo algo en la página. Por ejemplo, como, si hay algo que no tiene JavaScript, pero hay algunos, sabes, contenido muy estático como algunas secciones sobre una página que no suelen tener interactividad con ellas. Así que esto es como un mínimo que puedo dar a mis usuarios en la cara para que como ellos no están mirando una pantalla en blanco. Y cuando el JavaScript está disponible, como cuando el cliente ahora solicita el JavaScript viendo el HTML, ahora puedo hidratar mi aplicación y en realidad se vuelve totalmente lista para que los usuarios interactúen con ella también. Así que esto es básicamente lo que hace la representación del lado del servidor, ¿verdad? Hasta ahora todo bien. Creo que todos conocemos todos estos conceptos básicos. Ahora lo que quiero desviar esta historia hacia es lo que queremos centrarnos en esta masterclass. Como, todos sabemos que hay toneladas de ventajas y desventajas de cada tipo de paradigma que tenemos aquí. ¿Verdad? Así que vamos a verlas una por una, muy rápidamente. Así que si ves como, no voy a decirte algunos patterns de ambas técnicas y como cuáles son los pros y los contras en resumen. Así que, si ves que la representación del lado del cliente tiene mejores cargas de página posteriores, mientras que para la representación del lado del servidor, es mejor para una carga inicial de página, por lo que puede dar contenido más rápido en comparación con la representación del lado del cliente porque como, sabes, tiene que preparar todo desde cero y es el final en el navegador. Y en segundo lugar, la representación del lado del cliente hace un buen trabajo después de que se ha realizado el trabajo de carga inicial de la página. ¿Verdad? Así que, si vas a diferentes rutas y tratas de ver diferentes páginas, solo ese JavaScript se actualiza, que es realmente necesario.

Entonces, se ahorra mucha reobtención de datos porque ya tienes la mayoría de las cosas en tu plato, pero con la representación del lado del servidor, cada vez que vas a la página o quizás refrescas la aplicación renderizada del lado del servidor, tiene que hacer todas estas cosas cada vez una y otra vez. Por lo tanto, puede llevar a altos costos relacionados con el servidor también.

Ahora, las aplicaciones de representación del lado del cliente son excelentes para crear PWAs mientras que la representación del lado del cliente es mejor con la optimización de motores de búsqueda. Y el hecho es realmente simple porque estás mostrando algo en la página y los rastreadores web, o las diferentes APIs pueden tener acceso a esa información para que puedan mostrarla en los sitios web. Hasta ahora, tenemos este conjunto de ventajas. Y si ves las desventajas, de nuevo, la representación del lado del cliente no tiene lo que SSR tiene como carga inicial de página. Lo que la representación del lado del cliente tiene es como, como carga de datos posterior. Tienes que hacer cosas de representación y crear las páginas web en el navegador una y otra vez. Y la representación del lado del cliente es nuevamente mala para SEO, lo cual ya mencionamos en la sección de ventajas mientras que SSR es, ya sabes, bueno con cosas como, cosas como SEO. Así que con eso en mente, vamos a hacer esta lista un poco más corta y centrarnos solo en estas dos cosas.

Entonces, si ves que una cosa es buena y la misma cosa es, la cual la otra técnica no es buena, ¿verdad? Así que en este caso, uno tiene una buena carga inicial de datos, pero el otro no. Es bueno con cargas de página posteriores. Uno es bueno con, ya sabes, con páginas estáticas, por ejemplo la representación del lado del servidor, porque si tienes interactividad y JavaScript en eso, va a tomar un poco más de tiempo para representar tu página en el servidor. Porque de nuevo, JavaScript va a tomar un poco de tiempo. Pero en el caso de la representación del lado del cliente, es bueno con páginas dinámicas, ¿verdad? Porque estás representando todo en tu extremo en el navegador, ¿verdad? Hasta ahora todo bien. Es simple. Así que sabemos que, está bien, una cosa es buena y una cosa no lo es, en algunas otras técnicas también. Así que, ya sabes, no obtienes lo mejor de ambos mundos, ¿verdad?

Ahora, imagina otra parte de la historia, y esto puede ser el, ya sabes, quizás el clímax de la historia. Así que digamos que ahora, en lugar de que Bob llame a su hermana, quizás sería mejor si, quizás Bob tuviera acceso a todas estas, como, ya sabes, herramientas realmente geniales para construir el castillo de arena, ¿verdad? Como, si tuviera acceso a todas ellas, podría quizás elegir, ya sabes, cómo ponerlo en nuestra analogía cómo básicamente obtener ambas ventajas, ya sabes, tener a alguien más para ayudar a construir el castillo versus cómo podemos construir esas cosas juntos. Así que quizás pueda fusionar ambas ventajas y desventajas juntas con solo el conjunto de herramientas quizás. ¿Verdad? Y esto es básicamente lo que son los componentes del servidor que el equipo de React ha introducido. ¿Verdad? Entonces, los componentes del servidor son como algo nuevo. Así que si hablamos en términos técnicos, los componentes del servidor son la nueva forma de React de abstraer tanto la bondad del lado del cliente como de la representación del lado del servidor, que en realidad en lugar de darte una página o como HTML CSS o como algo como una salida de tipo HTML como hacen ambas técnicas, te da algún formato de abstracción intermedio que podrías decir, donde puede ayudar a representar las cosas más rápido y puede ayudarte a elegir qué es lo que quieres representar en el cliente, versus lo que quieres representar en el servidor en la misma página, porque la representación del lado del servidor no te permite hacerlo. Así que intentemos ver cómo los componentes del servidor están cambiando estas cosas, ¿verdad? Así que veamos de nuevo, un diagrama muy simple de un cliente y un servidor. Ahora, como el cliente de nuevo solicita una página web. Lo siento, el servidor obtiene, ahora el servidor está haciendo una parte de la representación del lado del servidor. Está representando tus componentes del servidor en el servidor. Y ahora, en lugar de darte esta salida, no te da tu HTML o como la representación del lado del servidor, alguna salida

Next.js lo hace de una manera diferente. Así que tiene como, te dice que, vale, todo lo que creas dentro del directorio de la aplicación, va a ser un componente de servidor por defecto. Aunque también puedes hacer algunos ajustes, podrías estar preguntándote como, ¿cómo hago para crear un componente del cliente si quiero crear un componente del servidor? ¿Cómo hago para, ya sabes, elegir entre los dos? Así que puedes simplemente como una línea, que es usar la directiva del cliente. Ahora esto te va a ayudar a decirle a React que, vale, esto es nada. No se va a renderizar en el servidor, por favor renderízalo en el cliente.

Bien, entonces abramos nuestras viejas DevTools. Y veamos qué es básicamente lo que realmente está enviando? ¿Cómo está funcionando realmente? Ahora si refresco esta página, verás que sigo obteniendo como sigo obteniendo algo del data porque realmente está preparando cosas para mí como una aplicación renderizada en el lado del servidor. ¿Verdad? Y si intento ver qué es lo que realmente está enviando. ¿Verdad? Es. Vamos a la. Sí. Entonces esto es lo que realmente está enviando ahora. Es como sabes un conjunto extraño de cosas que está utilizando pero es sabes un canal de comunicación intermedio entre el servidor y como el React en el cliente para decirte cómo fusionar todas estas cosas que se renderizan en el servidor en el cliente para que el cliente tenga que hacer un trabajo mínimo. Entonces esto es como lo que realmente está enviando. ¿Verdad? Ahora también intentemos ver y creo que tengo como otro ejemplo para explicarlo. Ahora hablamos de cómo los componentes del cliente y como cómo varios componentes pueden ser como sabes usados en conjunto en el servidor. ¿Verdad? Entonces si ves tengo como un hijo como un componente del cliente como un hijo que no estoy renderizando en el servidor y dentro de él estoy renderizando un componente del servidor. ¿Verdad? Ahora idealmente como desde el punto de vista teórico podríamos hablar de que el componente del servidor no debería enviar nada al cliente. Entonces no debería ver nada en mi trabajo. Entonces, ¿qué está compilando webpack? pero podría ver algo en el cliente. ¿Pero este componente hijo de línea o necesito esto? Vamos a las fuentes, vamos a webpack. Sí. Entonces si ves había una aplicación y solo tiene un archivo .psx del cliente que es solo para el componente del cliente que era como habíamos añadido esto todo en el servidor pero react solo le da esto al navegador que por favor renderice esto como un componente del cliente pero no ves ningún código que se envíe para el componente del servidor. Entonces no hay absolutamente ningún tamaño de paquete, no envías nada como parte de tu trabajo al componente del servidor pero el componente del cliente te lo da. Entonces es muy personalizable. Bien, entonces esto fue una cosa. Entonces sí, creo que cubrí la mayoría de esto. Entonces sí, esto es realmente el poder de los componentes del servidor. Te permite personalizar básicamente lo que quieres renderizar en el cliente lo que quieres renderizar en el servidor y como no hacer todas las cosas como

Unos pocos como si quieres ir a fondo con esto realmente recomendaría ver este video de YouTube del equipo de React donde realmente te han demostrado y explicado el problema en más detalles y también explican las cosas con una demostración realmente genial así que me encantaría que lo probaras y de nuevo hay una documentación genial que personalmente encontré muy útil y es tan simple entender las cosas por ejemplo la documentación oficial de Next.js y también hay un artículo muy genial de Zenstack sobre los componentes del servidor y cómo puedes empezar con ello mucho más rápido así que definitivamente lo recomendaría aquí.

Vale. El código para esta demostración lo puedes encontrar en la url de slackbits así que siéntete libre de jugar con él, intenta romperlo, haz lo que quieras con él, siempre es divertido aprender de esta manera y siéntete libre de gritarme cuando veas cualquier problema, cualquier problema en Twitter u otros canales. Y una de las últimas cosas es que estos son algunos tipos de problemas similares y espacios de problemas con los que seguimos trabajando en Postman. Así que también estamos contratando y si quieres formar parte de este viaje, siéntete libre de acudir al sitio web de carreras y conectar. Genial. Esto es principalmente lo que quería discutir. Espero que estén disfrutando de los increíbles conjuntos de conferencias y de las increíbles charlas que tenemos en el evento. Así que sigue aprendiendo, sigue disfrutando y nos vemos de nuevo.