Componentes del Servidor: La Épica Historia de Renderizar UX

This ad is not shown to multipass and full ticket holders
React Summit US
React Summit US 2025
November 18 - 21, 2025
New York, US & Online
The biggest React conference in the US
Learn More
In partnership with Focus Reactive
Upcoming event
React Summit US 2025
React Summit US 2025
November 18 - 21, 2025. New York, US & Online
Learn more
Bookmark
Rate this content

Los componentes del servidor, introducidos en React v18, terminan con estas deficiencias, permitiendo renderizar completamente los componentes de React en el servidor, en un formato de abstracción intermedia sin necesidad de agregar al paquete de JavaScript.

Esta charla tiene como objetivo cubrir los siguientes puntos:

1. Una divertida historia de cómo necesitábamos CSR y cómo SSR comenzó a tomar su lugar

2. ¿Qué son los componentes del servidor y qué beneficios trajeron como un tamaño de paquete de javascript de 0

3. Demostración de una aplicación simple utilizando renderización del lado del cliente, SSR y componentes del servidor y analizando las ganancias de rendimiento y entendiendo cuándo usar qué

4. Mi opinión sobre cómo cambiará la renderización de la interfaz de usuario con este enfoque

This talk has been presented at React Summit 2023, check out the latest edition of this React Conference.

FAQ

Los componentes del servidor en React son una nueva forma de combinar las ventajas de la renderización del lado del cliente y del servidor. En lugar de entregar HTML o CSS directo, proporcionan un formato de abstracción intermedio que permite una renderización más rápida y la opción de elegir qué renderizar en el cliente y qué en el servidor.

Los componentes del servidor de React renderizan partes de una página en el servidor y envían un formato especial de datos, como JSON, al cliente. Esto permite que React en el cliente maneje de manera eficiente la integración de estos componentes en el DOM virtual, optimizando el proceso de renderización y reduciendo la carga en el cliente.

La renderización del lado del servidor (SSR) es beneficiosa para la carga inicial de páginas web, ya que permite que el contenido se muestre más rápidamente. Es especialmente útil para la optimización en motores de búsqueda (SEO) porque los rastreadores pueden acceder directamente al contenido HTML renderizado por el servidor.

Los componentes del servidor reducen el tamaño del paquete enviado al cliente a cero, al no requerir que el JavaScript ejecutado en el servidor se envíe al cliente. Esto resulta en una carga más ligera y rápida para el cliente, mientras se combinan las estrategias de renderización del lado del cliente y del servidor.

Una limitación de los componentes del servidor es que no soportan estados ni efectos, que son típicos de los componentes del cliente. Están diseñados principalmente para tareas como la obtención de datos y la muestra de contenido estático, mientras que los componentes interactivos deben manejarse con componentes del cliente.

Para comenzar a usar componentes del servidor en React, puedes utilizar frameworks como Next.js, que asume por defecto que todos los componentes dentro del directorio de la aplicación son componentes del servidor. Para especificar un componente del cliente, se debe agregar la directiva 'use client'.

Nikhil Sharma
Nikhil Sharma
26 min
06 Jun, 2023

Comments

Sign in or register to post your comment.
Video Summary and Transcription
Esta charla introduce los componentes del servidor en React, que proporcionan un formato intermedio para renderizar y ofrecen ventajas tanto para la renderización del lado del cliente como del servidor. Los componentes del servidor reducen el tamaño del paquete en el cliente y mejoran la optimización del motor de búsqueda. Abstraen el proceso de renderización, permitiendo una renderización más rápida y flexibilidad en la elección de dónde renderizar los componentes. Mientras que los componentes del servidor todavía están en la etapa experimental, Next.js es un buen punto de partida para probarlos.

1. Introducción a los Componentes del Servidor

Short description:

Hoy, hablaré sobre una de las cosas más geniales en las que ha estado trabajando React, que son los componentes del servidor. Profundizaremos en diferentes conceptos, pero explicaré las cosas de una manera un poco más divertida. 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. 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 sistemas de diseño y la base general de la experiencia del usuario que hemos establecido aquí en el producto. Me encanta hablar sobre todo lo que está haciendo la web y hacia dónde se dirige en general. Entonces, si eres un geek como yo, me encantaría conectarme en Twitter, en GitHub. Puedes encontrar todas estas manijas que definitivamente compartiré con todos ustedes.

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.

Read also

2. Introducción a la Representación del Lado del Cliente

Short description:

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. La responsabilidad de construir el castillo de arena es probablemente solo de Bob. Así es como funciona la representación del lado del cliente en este momento. 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?

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.

3. Representación del lado del servidor y representación del lado del cliente

Short description:

Ahora Bob recuerda, oh, no tengo nada, así que déjame pedir ayuda. Bob recibe ayuda de su hermana, Sarah. Sarah está bien equipada y apasionada por construir castillos de arena. Esto es lo que es SSR, donde le dices al servidor que construya el sitio web por ti. El servidor crea la salida HTML final en el propio servidor, y obtienes esa salida HTML en el cliente. La representación del lado del servidor proporciona un mínimo para que los usuarios vean, y cuando JavaScript está disponible, la aplicación está lista para que los usuarios interactúen con ella. En esta masterclass, nos centraremos en las ventajas y desventajas de la representación del lado del cliente y la representación del lado del servidor. La representación del lado del cliente tiene mejores cargas de página posteriores, mientras que la representación del lado del servidor es mejor para la carga inicial de la página y proporciona contenido más rápido. 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.

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.

4. Componentes del Servidor y Representación

Short description:

La representación del lado del servidor puede llevar a altos costos relacionados con el servidor, mientras que la representación del lado del cliente es mejor para la optimización de motores de búsqueda. Sin embargo, la representación del lado del cliente requiere la representación y creación de páginas web en el navegador repetidamente, lo que es malo para el SEO. Por otro lado, la representación del lado del servidor es buena para páginas estáticas pero tarda más tiempo en representar con interactividad y JavaScript. Los componentes del servidor, introducidos por el equipo de React, abstraen tanto la representación del lado del cliente como del servidor, proporcionando un formato de abstracción intermedio. Esto permite una representación más rápida y la flexibilidad para elegir dónde representar los componentes en el cliente o en el servidor.

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

5. Componentes del Servidor y División Automática de Código

Short description:

Te proporciona un formato especial de datos para que React renderice los componentes más rápido y fusione los cambios de nuevo a su árbol DOM virtual. Los componentes del servidor se renderizan en el servidor, reduciendo el tamaño del paquete en el cliente. Esta técnica combina estrategias del lado del cliente y del servidor, permitiendo flexibilidad en la renderización. La división automática de código simplifica la carga perezosa de componentes utilizando React.lazy.

que puedes mostrar directamente al navegador. Te da algo, ya sabes, muy JSON-y o como es un formato muy extraño, pero te da un formato especial de data. Ahora, esto no es para ti. Esto es para que React averigüe cómo puede renderizar estos componentes más rápido y como fusionar todos los cambios que ha hecho en el cliente, fusionarlos de nuevo a su árbol DOM virtual, ¿verdad? Así que esta es la forma más sencilla que puedes poner. Así que renderiza algunas partes de tu página que son, como componentes del servidor. Los renderiza en el servidor. Te da algunos data y finalmente genera, como tu, tu, tu cliente en realidad va a hacer el resto del trabajo. No es tan pesado, pero puede hacer esa parte mucho más rápido que la renderización del lado del cliente. Bien. Así que hablando de los pros y contras de todo esto es lo que obtienes básicamente de esta técnica, de todo este FSR. Así que una cosa es que obtienes cero tamaño de paquete y tienes razón cuando escuchas eso. Así que los componentes del servidor solo se ejecutan en el servidor. Así que nunca envías el JavaScript que hemos ejecutado en el servidor. Así que todos los componentes, puedes tener quizás miles o cientos de componentes, ninguno de ellos se envía realmente al cliente, lo que es exactamente cero tamaño de paquete que también en este ejemplo podrías haber visto, Dan Avermoff también lo mostró en una de las masterclass. Así que este es uno de los mayores pros. Te ayuda a hacer tu paquete del lado del cliente mucho más pequeño. Y también como he estado diciendo todo este tiempo, obtienes lo mejor de ambos mundos, que son tanto las estrategias del lado del cliente como del servidor combinadas en una técnica. Así que imagina algo como esto. Tienes un árbol DOM. Puedes tener algo que se está renderizando en el servidor. Hay algo que se está renderizando en el cliente. Hablamos de las implementaciones, cómo puedes hacer eso. Pero puedes decirle a React que, está bien, algunas partes de mi aplicación web deben ser renderizadas en el servidor. Y en la misma página, algunas de ellas tienen que ser renderizadas en el lado del cliente. Así que puedes dar esa indicación ahora a React. Así que no estaba en la renderización del lado del servidor, y ahora React manejará el resto de qué partes trabajar en el servidor y qué simplemente omitirlo y dejar que el cliente lo maneje. Así que esto es algo muy mágico y muy poderoso para hacer. Bien. Pasando a la siguiente cosa es la división automática de código. Ahora, personalmente me gusta esto porque, ya sabes, como actualmente verías, tenemos que escribir un código que es algo como esto. Tienes una simple biblioteca React.lazy, y puedes cargar tus componentes de forma perezosa o

6. Uso de Componentes del Servidor

Short description:

Con los componentos del servidor, ya no se necesitan las APIs React.lazy ya que el servidor se encarga de la división del código. Los componentes del servidor se utilizan para la visualización y obtención de datos, mientras que los componentes del cliente se encargan de la interactividad. Los componentes del servidor pueden renderizar otros componentes del servidor o del cliente, pero solo se pueden pasar props serializables entre ellos. Para utilizar componentes del servidor, se crea una extensión de archivo .server.js para indicar que el componente se renderizará en el servidor.

los necesitas, ¿verdad? Por lo tanto, tienes que escribir algunas cosas. Entonces, con los componentos del servidor, esas APIs de React.lazy, desaparecen porque se encargan de esto por ti. Ahora, si ves en este ejemplo, como te mostraré tal vez en la diapositiva anterior. Así que tenías el antiguo renderizador de fotos y el nuevo renderizador de fotos, estos dos componentes, que eran componentes del cliente, y tú los estabas cargando de forma perezosa. Pero ahora, ya que todo se está renderizando en el servidor, los componentes del servidor, en el servidor, pueden realmente segregar todos, como todos los imports del cliente que no estás utilizando mientras renderizas tu componente final del servidor, que puede componerse de tu cliente y el servidor. Así que puede hacer esa división del código por ti. Por ejemplo, en este caso, si los indicadores de características como el nuevo uso del renderizador de fotos es verdadero, solo el componente del nuevo renderizador de fotos va a ser cargado como parte del JavaScript aquí y no el otro. Bien. Pasando al siguiente paso, si te imaginas este escenario, tienes tus componentes que antes estaban en tu cliente pero ahora hemos trasladado estos mismos componentes de React del lado del cliente al servidor. Así que como estamos muy cerca del servidor, ahora podemos tener llamadas más rápidas y directas con el servidor y la respuesta que podemos obtener de la base de datos, puede ser mucho más rápida diría yo en comparación con las llamadas fetch habituales que hacemos. Así que es súper rápido que eso. Bien. Hay algunas cosas que también no podemos hacer, que es con, aunque puedes usar componentes del cliente y del servidor, ambos en conjunto en el servidor, cosas como estados y efectos, que son usualmente cosas de los componentes del cliente, los componentes del servidor no los soportan. Así que estas cosas son algo que tú no puedes usar. Son una muy buena cosa. Si quieres imaginar algo, los componentes del servidor se utilizan generalmente para mostrar algunos datos o hacer algunas llamadas fetch o hacer algún tipo de obtención de datos. Cuando hay interactividad involucrada, irías con componentes del cliente. Así que diría que hay una regla general, la obtención de datos o la visualización de cosas sin interactividad, componentes del servidor, interactividad y más riqueza, tienes que ir con eso es cómo necesitamos segregar esos dos. Lo siguiente que tienes que hacer, como si te gusta puedes tener componentes del servidor y también puedes renderizar un componente del servidor dentro de un componente del servidor o puedes renderizar un componente del cliente dentro de él. Pero solo puedes también pasar props de los componentes del servidor al componente del cliente, pero solo las props, que son serializables a través de la red, porque los componentes del servidor no se están renderizando en el servidor. Como van a, lo siento, los componentes del servidor se están renderizando en el servidor y los componentes del cliente no. Así que tienes que, como, si quieres compartir datos entre ellos, tienen que pasar por el enlace del servidor. Así que solo los datos serializables, como, ya sabes, objetos y cadenas, números, cosas así. Pueden ser fácilmente serializados. Pero cosas como, ya sabes, funciones, no puedes, no puedes usarlas como, no puedes pasarlas como una prop. Así que esta es una limitación. Entonces, ahora, sí, ahora veamos cómo usar realmente los componentes del servidor. ¿Qué necesitas hacer para empezar? En React, creo que muchos de nosotros ya hemos visto la charla de cómo el equipo de React lo ha estado demostrando. Pero puedes usar una extensión .server.js para indicar, como en el ejemplo que mencionó React, cómo crear un componente del servidor. Así que esta es una indicación de que este componente se va a renderizar como un componente del servidor en el servidor.

7. Next.js y Creación de Componentes

Short description:

Next.js te permite crear componentes de servidor por defecto para todo lo que está dentro del directorio de la aplicación. Puedes usar la directiva 'use client' para crear un componente del cliente en su lugar. Esta directiva le dice a React que renderice el componente en el cliente en lugar del servidor.

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.

8. Demo y Componentes de Servidor

Short description:

Vamos a la demostración y veamos cómo funcionan las cosas. La demostración es una simple llamada a la API que obtiene una broma de desarrollador. La renderización en el lado del cliente muestra primero los datos estáticos y luego obtiene la pregunta y la respuesta. La renderización en el lado del servidor prepara todo en el servidor, eliminando las pantallas en blanco. Los componentes del servidor proporcionan una alternativa interesante. Abramos nuestras DevTools.

Y así es como hace esa distinción. Bueno, suficiente charla. Ahora realmente vamos a la demostración y veamos cómo están las cosas. Ahora he abierto esta pequeña demostración aquí en una página separada. Y esto te muestra una cosa muy simple. Es solo una llamada a la API que hago en cada recarga, y simplemente te muestra una broma de desarrollador. Como tienes una pregunta, y luego te da una respuesta. Como en este caso, ¿por qué los programadores de nivel de ensamblaje necesitan saber cómo nadar? Porque trabajan por debajo del nivel del mar. Buena. OK. Así es como es la demostración básica. Así que si ves las desventajas que habíamos estado pensando sobre la renderización en el lado del cliente y del servidor. Así que el lado del cliente realmente está renderizando cosas por adelantado cuando obtiene los data. Así que como podrías, como puedes probarlo es si refresco mi aplicación aquí, vería que hay algunos data estáticos que puedo obtener como parte de HTML, pero como Javascript no se va a cargar, es posible que no obtenga todo esto. Que es como la pregunta y la respuesta que estoy obteniendo como una llamada a la API. Así que si refresco, verías por un tiempo, no obtengo la pregunta y la respuesta. Solo obtengo el contenido estático que he codificado porque así es como funciona la renderización en el lado del cliente, ¿verdad? Todavía está obteniendo data del servidor y cuando el Javascript está ahí, va a renderizar las cosas. Va a construir el castillo de arena por adelantado. Así es como sucede esto. Ustedes ya saben cómo se va a comportar la renderización en el lado del servidor en este caso, ¿no? Así que ahora estamos preparando todo en el servidor. No estamos esperando, no estamos haciendo eso en el cliente. Así que si ahora refresco esta página, no debería ver un espacio en blanco, debería ver esto por adelantado. Así que si refresco, ves, oh, okay, tal vez creo que solo reiniciaré. Okay, algo con la construcción anterior, no sé. Okay, veamos si esto se reinicia. Okay, sí, aquí estamos. Así que si intento refrescar, verás, veo los data, como veo todo por adelantado, no estoy esperando una pantalla en blanco o que mi JavaScript se ejecute en este cliente o algo así, estoy preparando todo en el servidor, enviándolo. Así es como están sucediendo las cosas. Bueno, ahora cómo, los componentes del servidor son diferentes con esto. Así que ahora veamos algunas cosas muy interesantes ahora.

9. Entendiendo la Representación de Componentes de Servidor

Short description:

Abramos nuestras DevTools y veamos qué es lo que realmente se envía desde el servidor al cliente de React. El servidor envía un canal de comunicación intermedio para fusionar los componentes renderizados en el cliente, minimizando el trabajo del cliente. Otro ejemplo muestra cómo se pueden utilizar juntos los componentos del cliente y del servidor. El componente del servidor no envía nada al cliente, lo que resulta en un tamaño de paquete cero. Este es el poder de los componentes del servidor, permitiendo la personalización de la representación en el cliente y el servidor sin repetición.

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

10. Ventajas y Compromisos de los Componentes del Servidor

Short description:

Los componentos del servidor tienen ventajas, pero hay compromisos a considerar. No se recomienda usarlos en aplicaciones de producción todavía, ya que todavía están en la etapa experimental. Next.js es un buen punto de partida para probarlos. Mira el video de YouTube del equipo de React y consulta la documentación oficial de Next.js y el artículo de Zenstack para obtener más detalles. Siéntete libre de explorar el código de demostración y comunicarte por cualquier problema. Postman también está contratando.

una y otra vez. Así que obtienes como de nuevo lo que estás hablando. Lo mejor de ambos mundos es lo que hace que la estrategia sea tan hermosa. Bien, con eso dicho. Ahora hablemos de algunas cosas más. Así que podrías estar pensando que los componentes del servidor son tan geniales que básicamente no tienen desventajas, ¿verdad? Como que puedo usarlos en cualquier lugar, en cualquier momento y como que mis sitios web van a ser súper eficientes pero como todo tiene un lado negativo. Así que como de nuevo esta estrategia también tiene sus compromisos pero lo más importante que los compromisos que habíamos discutido como ser capaces de usar efectos o actualizaciones de estado o como todavía necesitas un servidor así que tal vez esto de nuevo o como afecta tus costos relacionados con el servidor así que esas partes también están ahí. Pero creo que más importante no recomendaría probarlos en las aplicaciones de producción en sí porque el estado actual es que creo que el equipo de React todavía está haciendo un trabajo absolutamente genial en recoger feedback y ser súper transparentes sobre sus hallazgos e investigaciones pero está en la misma etapa experimental en React y si quieres probarlo NextJS como puedes empezar con NextJS y así es como construí esta demostración en sí Así que es súper fácil de usar, me encantaría que lo probaras.

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.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Simplificando los Componentes del Servidor
React Advanced 2023React Advanced 2023
27 min
Simplificando los Componentes del Servidor
Top Content
React server components simplify server-side rendering and provide a mental model of components as pure functions. Using React as a library for server components allows for building a basic RSC server and connecting it to an SSR server. RSC responses are serialized virtual DOM that offload code from the client and handle interactivity. The client manifest maps serialized placeholders to real components on the client, enabling dynamic rendering. Server components combine the best of classic web development and progressive enhancement, offering the advantage of moving logic from the client to the server.
Una Guía del Comportamiento de Renderizado de React
React Advanced 2022React Advanced 2022
25 min
Una Guía del Comportamiento de Renderizado de React
Top Content
This transcription provides a brief guide to React rendering behavior. It explains the process of rendering, comparing new and old elements, and the importance of pure rendering without side effects. It also covers topics such as batching and double rendering, optimizing rendering and using context and Redux in React. Overall, it offers valuable insights for developers looking to understand and optimize React rendering.
Construyendo Mejores Sitios Web con Remix
React Summit Remote Edition 2021React Summit Remote Edition 2021
33 min
Construyendo Mejores Sitios Web con Remix
Top Content
Remix is a web framework built on React Router that focuses on web fundamentals, accessibility, performance, and flexibility. It delivers real HTML and SEO benefits, and allows for automatic updating of meta tags and styles. It provides features like login functionality, session management, and error handling. Remix is a server-rendered framework that can enhance sites with JavaScript but doesn't require it for basic functionality. It aims to create quality HTML-driven documents and is flexible for use with different web technologies and stacks.
Compilador React Forget - Entendiendo React Idiomático
React Advanced 2023React Advanced 2023
33 min
Compilador React Forget - Entendiendo React Idiomático
Top Content
Joe Savona
Mofei Zhang
2 authors
The Talk discusses React Forget, a compiler built at Meta that aims to optimize client-side React development. It explores the use of memoization to improve performance and the vision of Forget to automatically determine dependencies at build time. Forget is named with an F-word pun and has the potential to optimize server builds and enable dead code elimination. The team plans to make Forget open-source and is focused on ensuring its quality before release.
Uso efectivo de useEffect
React Advanced 2022React Advanced 2022
30 min
Uso efectivo de useEffect
Top Content
Today's Talk explores the use of the useEffect hook in React development, covering topics such as fetching data, handling race conditions and cleanup, and optimizing performance. It also discusses the correct use of useEffect in React 18, the distinction between Activity Effects and Action Effects, and the potential misuse of useEffect. The Talk highlights the benefits of using useQuery or SWR for data fetching, the problems with using useEffect for initializing global singletons, and the use of state machines for handling effects. The speaker also recommends exploring the beta React docs and using tools like the stately.ai editor for visualizing state machines.
Acelerando tu aplicación React con menos JavaScript
React Summit 2023React Summit 2023
32 min
Acelerando tu aplicación React con menos JavaScript
Top Content
Mishko, the creator of Angular and AngularJS, discusses the challenges of website performance and JavaScript hydration. He explains the differences between client-side and server-side rendering and introduces Quik as a solution for efficient component hydration. Mishko demonstrates examples of state management and intercommunication using Quik. He highlights the performance benefits of using Quik with React and emphasizes the importance of reducing JavaScript size for better performance. Finally, he mentions the use of QUIC in both MPA and SPA applications for improved startup performance.

Workshops on related topic

Masterclass de Depuración de Rendimiento de React
React Summit 2023React Summit 2023
170 min
Masterclass de Depuración de Rendimiento de React
Top Content
Featured Workshop
Ivan Akulov
Ivan Akulov
Los primeros intentos de Ivan en la depuración de rendimiento fueron caóticos. Vería una interacción lenta, intentaría una optimización aleatoria, vería que no ayudaba, y seguiría intentando otras optimizaciones hasta que encontraba la correcta (o se rendía).
En aquel entonces, Ivan no sabía cómo usar bien las herramientas de rendimiento. Haría una grabación en Chrome DevTools o React Profiler, la examinaría, intentaría hacer clic en cosas aleatorias, y luego la cerraría frustrado unos minutos después. Ahora, Ivan sabe exactamente dónde y qué buscar. Y en esta masterclass, Ivan te enseñará eso también.
Así es como va a funcionar. Tomaremos una aplicación lenta → la depuraremos (usando herramientas como Chrome DevTools, React Profiler, y why-did-you-render) → identificaremos el cuello de botella → y luego repetiremos, varias veces más. No hablaremos de las soluciones (en el 90% de los casos, es simplemente el viejo y regular useMemo() o memo()). Pero hablaremos de todo lo que viene antes - y aprenderemos a analizar cualquier problema de rendimiento de React, paso a paso.
(Nota: Esta masterclass es más adecuada para ingenieros que ya están familiarizados con cómo funcionan useMemo() y memo() - pero quieren mejorar en el uso de las herramientas de rendimiento alrededor de React. Además, estaremos cubriendo el rendimiento de la interacción, no la velocidad de carga, por lo que no escucharás una palabra sobre Lighthouse 🤐)
Next.js para Desarrolladores de React.js
React Day Berlin 2023React Day Berlin 2023
157 min
Next.js para Desarrolladores de React.js
Top Content
Featured WorkshopFree
Adrian Hajdin
Adrian Hajdin
En esta avanzada masterclass de Next.js, profundizaremos en conceptos clave y técnicas que permiten a los desarrolladores de React.js aprovechar al máximo Next.js. Exploraremos temas avanzados y prácticas prácticas, equipándote con las habilidades necesarias para construir aplicaciones web de alto rendimiento y tomar decisiones arquitectónicas informadas.
Al final de esta masterclass, serás capaz de:1. Comprender los beneficios de los Componentes del Servidor React y su papel en la construcción de aplicaciones React interactivas, renderizadas por el servidor.2. Diferenciar entre el tiempo de ejecución de Edge y Node.js en Next.js y saber cuándo usar cada uno en función de los requisitos de tu proyecto.3. Explorar técnicas avanzadas de Renderizado del Lado del Servidor (SSR), incluyendo streaming, fetching paralelo vs. secuencial, y sincronización de datos.4. Implementar estrategias de caché para mejorar el rendimiento y reducir la carga del servidor en las aplicaciones Next.js.5. Utilizar Acciones React para manejar la mutación compleja del servidor.6. Optimizar tus aplicaciones Next.js para SEO, compartir en redes sociales, y rendimiento general para mejorar la descubrabilidad y la participación del usuario.
Aventuras de Renderizado Concurrente en React 18
React Advanced 2021React Advanced 2021
132 min
Aventuras de Renderizado Concurrente en React 18
Top Content
Featured Workshop
Maurice de Beijer
Maurice de Beijer
Con el lanzamiento de React 18 finalmente obtenemos el tan esperado renderizado concurrente. Pero, ¿cómo va a afectar eso a tu aplicación? ¿Cuáles son los beneficios del renderizado concurrente en React? ¿Qué necesitas hacer para cambiar al renderizado concurrente cuando actualices a React 18? ¿Y qué pasa si no quieres o no puedes usar el renderizado concurrente todavía?

¡Hay algunos cambios de comportamiento de los que debes estar al tanto! En esta masterclass cubriremos todos esos temas y más.

Acompáñame con tu portátil en esta masterclass interactiva. Verás lo fácil que es cambiar al renderizado concurrente en tu aplicación React. Aprenderás todo sobre el renderizado concurrente, SuspenseList, la API startTransition y más.
Consejos sobre React Hooks que solo los profesionales conocen
React Summit Remote Edition 2021React Summit Remote Edition 2021
177 min
Consejos sobre React Hooks que solo los profesionales conocen
Top Content
Featured Workshop
Maurice de Beijer
Maurice de Beijer
La adición de la API de hooks a React fue un cambio bastante importante. Antes de los hooks, la mayoría de los componentos tenían que ser basados en clases. Ahora, con los hooks, estos son a menudo componentes funcionales mucho más simples. Los hooks pueden ser realmente simples de usar. Casi engañosamente simples. Porque todavía hay muchas formas en las que puedes equivocarte con los hooks. Y a menudo resulta que hay muchas formas en las que puedes mejorar tus componentes con una mejor comprensión de cómo se puede usar cada hook de React.Aprenderás todo sobre los pros y los contras de los diversos hooks. Aprenderás cuándo usar useState() versus useReducer(). Veremos cómo usar useContext() de manera eficiente. Verás cuándo usar useLayoutEffect() y cuándo useEffect() es mejor.
Presentando FlashList: Construyamos juntos una lista performante en React Native
React Advanced 2022React Advanced 2022
81 min
Presentando FlashList: Construyamos juntos una lista performante en React Native
Top Content
Featured Workshop
David Cortés Fulla
Marek Fořt
Talha Naqvi
3 authors
En esta masterclass aprenderás por qué creamos FlashList en Shopify y cómo puedes usarlo en tu código hoy. Te mostraremos cómo tomar una lista que no es performante en FlatList y hacerla performante usando FlashList con mínimo esfuerzo. Usaremos herramientas como Flipper, nuestro propio código de benchmarking, y te enseñaremos cómo la API de FlashList puede cubrir casos de uso más complejos y aún así mantener un rendimiento de primera categoría.Sabrás:- Breve presentación sobre qué es FlashList, por qué lo construimos, etc.- Migrando de FlatList a FlashList- Enseñando cómo escribir una lista performante- Utilizando las herramientas proporcionadas por la biblioteca FlashList (principalmente el hook useBenchmark)- Usando los plugins de Flipper (gráfico de llamas, nuestro perfilador de listas, perfilador de UI & JS FPS, etc.)- Optimizando el rendimiento de FlashList utilizando props más avanzados como `getType`- 5-6 tareas de muestra donde descubriremos y solucionaremos problemas juntos- Preguntas y respuestas con el equipo de Shopify
React, TypeScript y TDD
React Advanced 2021React Advanced 2021
174 min
React, TypeScript y TDD
Top Content
Featured Workshop
Paul Everitt
Paul Everitt
ReactJS es extremadamente popular y, por lo tanto, ampliamente soportado. TypeScript está ganando popularidad y, por lo tanto, cada vez más soportado.

¿Los dos juntos? No tanto. Dado que ambos cambian rápidamente, es difícil encontrar materiales de aprendizaje precisos.

¿React+TypeScript, con los IDEs de JetBrains? Esa combinación de tres partes es el tema de esta serie. Mostraremos un poco sobre mucho. Es decir, los pasos clave para ser productivo, en el IDE, para proyectos de React utilizando TypeScript. En el camino, mostraremos el desarrollo guiado por pruebas y enfatizaremos consejos y trucos en el IDE.