Enfoques Modernos para Crear Sitios Web Extremadamente Rápidos

Rate this content
Bookmark

En esta charla se centra en las optimizaciones de rendimiento y enfoques basados en estándares para lograr la versión más rápida de su sitio que pueda tener. También hablaremos sobre herramientas y frameworks modernos como Remix que ayudan a que su sitio sea rápido con muy poco esfuerzo.

24 min
02 Jun, 2023

Video Summary and Transcription

La charla trata sobre la optimización del rendimiento en el desarrollo y la ingeniería de software. Cubre temas como la optimización de las solicitudes, la anticipación de las necesidades futuras y la comparación de aplicaciones de una sola página con aplicaciones de varias páginas. También explora las ventajas de las aplicaciones de una sola página y el uso de Remix para construir páginas. La charla hace hincapié en la división de código, la optimización de la obtención de datos y la resolución del estado del lado del cliente. Concluye con una discusión sobre la pre-renderización, la adopción de Remix y la pre-renderización con React.

Available in English

1. Introducción a la Optimización del Rendimiento

Short description:

Hola a todos, estoy muy feliz de estar en Ámsterdam. Enseño React de manera regular y me encanta. Hablemos sobre el rendimiento. Las solicitudes más rápidas que puedes hacer son las que no haces en absoluto. Pero, ¿qué pasa si necesitas hacer una solicitud? Obtengamos solo lo que necesitamos. Anticipa las necesidades futuras y obtén las cosas por adelantado. Elige lo que funcione para ti. Obténlo cerca, como desde una caché.

Ha sido muy divertido, y gracias por recibirme. Mi nombre es Brad Westphal, trabajo en React Training. Enseño React de manera regular, y me encanta.

Hagamos cosas interesantes. Se me ocurrió esta charla, como a muchos oradores, tienes una idea general y realmente no sabes exactamente cómo la vas a hacer o en qué dirección va a ir, pero sabía que quería hablar sobre el rendimiento. No sabía si iba a hablar sobre el rendimiento del renderizado del DOM, o tal vez sobre las animaciones, o todo lo anterior, y hacer un gran desorden de todo.

Comencé a preguntar a mi alrededor, le pregunté a algunos amigos y algunas personas en Twitter y cosas así, ¿en qué piensas cuando piensas en el rendimiento de un sitio web? Esta es una de las respuestas más comunes que recibí. Las solicitudes más rápidas que puedes hacer son las que no haces en absoluto. ¿Alguna vez has escuchado eso? Cuando escucho esto, me quedo un poco como, ¿qué? Vale, eso es un poco filosófico, ellos hacen su punto y se van, como, ahí lo tienes, ahí está el rendimiento. Pero estamos en el negocio de hacer sitios web. Que hacen solicitudes. No puedo eliminar todas mis solicitudes. No es realmente práctico.

Así que, comencé a pensar en esto y pensé, está bien. Si eso funciona, si eso ayuda. Pero, ¿qué pasa si necesitas hacer una solicitud? Porque todos vamos a necesitar hacer eso. Entonces, de eso trata esta charla. Tal vez obtengamos solo lo que necesitamos. Bastante simple, ¿no? Suena bien. Ok. Consejo. Sigamos adelante. Tal vez anticipemos las necesidades futuras. Por ejemplo, obtengamos las cosas por adelantado cuando creamos que las vamos a necesitar. A veces puede parecer que estos dos están un poco en desacuerdo entre sí. Pero elige el que funcione para ti en esta situación. Por supuesto, querrás obtenerlo cerca. Como desde una caché. Eso sería genial.

2. Optimización de Solicitudes y Anticipación de Necesidades Futuras

Short description:

A veces necesitas solicitar dos cosas a la vez. Y si haces eso, creo que deberíamos intentar hacerlas en paralelo. Obtén solo lo que necesitas. La carga perezosa de imágenes puede hacer que un sitio web sea más rápido. Anticipa las necesidades futuras mediante el pre-renderizado de contenido.

A veces necesitas solicitar dos cosas a la vez. Y si haces eso, creo que deberíamos intentar hacerlas en paralelo. Y no permitas que lo lento detenga a lo rápido. Así que empecemos aquí mismo.

Si necesitas hacer una solicitud, obtén solo lo que necesitas. Comencemos con algo más estándar y no tanto React. Con las imágenes, estoy seguro de que la mayoría de ustedes saben, esto ha estado presente por un tiempo. Podemos hacer carga perezosa, lo cual es realmente genial. Así que debajo del pliegue, si puedes identificar ciertas imágenes como algo que no necesariamente necesita ser cargado. Tal vez la solicitud más rápida que puedes hacer es la que no haces en absoluto, tal vez. Pero obtén solo lo que necesitas. Cosas que solo necesitan ser cargadas cuando el usuario las necesita. Entonces, cuando el usuario se desplaza, obtienen la imagen, muy bien. Ok. Eso es de lo que estoy hablando. Cosas que puedes hacer para que un sitio web sea un poco más rápido.

Anticipa las necesidades futuras. Un ejemplo estándar de eso sería tal vez uno que no hayas visto. Link, pre-render, en minúscula. Esto no es un componente React. Es una cosa estándar de HTML. Lo sé, gracioso, ¿verdad? Ok. Esto es algo que tal vez puedas usar. Si un usuario visita tu sitio, sea cual sea la página en la que aterricen, imagina anticipar de manera muy fácil a qué página van a ir a continuación, porque probablemente tengas una idea, y estás descargando esas páginas en segundo plano antes de tiempo. Y luego el usuario visita la segunda página y luego descargas la tercera y cuarta páginas posibles a las que podrían querer ir. Esto es realmente agradable. MDN describe esto como cuando el usuario navega hacia el contenido pre-renderizado, el contenido actual es reemplazado instantáneamente por el contenido pre-renderizado. Esto es agradable. ¿Sabes por qué? Porque me hace sentir como si el usuario estuviera obteniendo una experiencia como la de desarrollo local. Como si todos obtuviéramos la mejor versión de nuestros sitios web, ¿verdad? Porque estamos haciendo desarrollo local.

3. Comparación entre Aplicaciones de Página Única y Aplicaciones de Múltiples Páginas

Short description:

Es súper rápido. Comparemos la construcción de una aplicación clásica de múltiples páginas con una aplicación de página única. La aplicación de página única responde más rápido, pero la aplicación de múltiples páginas tiene un archivo HTML completamente formado. La aplicación de múltiples páginas obtiene JavaScript para eventos, mientras que la aplicación de página única obtiene datos. Las solicitudes en una aplicación de página única pueden estar muy separadas y deben realizarse en paralelo.

Es súper rápido. Y luego lo pones en la red, en Internet, y es un poco más lento, y te dices a ti mismo, bueno, es Internet. Así es, ¿verdad? Pero sería realmente agradable, idealmente, si pudiéramos tener una experiencia súper rápida para nuestros usuarios como la que tenemos localmente. Eso sería lo ideal, creo.

De acuerdo. Así que estas dos cosas. Comparemos cómo es construir una aplicación clásica de múltiples páginas versus una aplicación de página única. Estoy seguro de que muchos de ustedes están familiarizados con las aplicaciones de página única porque eso ha sido lo popular durante unos 10 años. Pero he estado aquí el tiempo suficiente para recordar cómo era construir las aplicaciones de múltiples páginas y las dificultades que tenían. Hay un compromiso entre estas dos cosas. Construyamos esto en capas. Así que podríamos tener un diseño principal, como un subdiseño, y una página, como muchas de estas aplicaciones tendrían.

De acuerdo. Así que imaginemos cómo serán las solicitudes de red para los diferentes usuarios que visitan la misma aplicación. Lo primero que podría suceder es que el usuario de la aplicación de página única obtenga una respuesta inmediata del servidor, pero será principalmente una estructura básica de un archivo HTML. Mientras tanto, el usuario de la aplicación de múltiples páginas no ha obtenido ningún HTML porque todo se está construyendo en el servidor. Entonces, ¿qué es mejor? No lo sé. Tal vez sea subjetivo. Tal vez sea demasiado pronto para decirlo, pero si tenemos que entregar un trofeo en este punto, tal vez porque la aplicación de página única respondió un poco más rápido, tal vez le otorguemos el trofeo a la aplicación de página única.

Lo siguiente que probablemente suceda es que la aplicación de múltiples páginas obtenga un archivo HTML completamente formado mientras que la aplicación de página única todavía está obteniendo JavaScript, y luego tenemos que construir el HTML. Pero ¿son estas dos cosas iguales en este punto? No realmente, porque el usuario de la aplicación de múltiples páginas está experimentando un archivo HTML completamente formado mientras que el usuario de la aplicación de página única está viendo los indicadores de carga. Así que tal vez invertimos esto. Tal vez la aplicación de múltiples páginas sea un poco mejor en este momento. Ahora, la aplicación de múltiples páginas tiene que obtener JavaScript, pero esto probablemente sea solo para eventos. Y realmente no disminuyó demasiado la experiencia del usuario. Y al mismo tiempo, la aplicación de página única está obteniendo datos. ¿Notas la distancia aquí? ¿Dónde se obtuvieron los datos cuando estábamos en la aplicación de múltiples páginas? Estaba en un servidor hablando con otro servidor. Podrían haber estado uno al lado del otro, ¿verdad? Idealmente, podrían estar cerca uno del otro. Con la aplicación de página única, probablemente estén muy separados y debas hacer el mismo número de solicitudes, probablemente, si estás utilizando un backend de tipo RESTful. Algunas de estas solicitudes se pueden hacer en paralelo, a veces.

4. Optimización de Aplicaciones de Página Única

Short description:

Las aplicaciones de página única son propensas a cascadas porque estamos obteniendo datos dentro de los componentes. Idealmente, nos gustaría hacer esto en paralelo entre sí. React Query y el nuevo enrutador de React pueden ayudar con esto. Sin embargo, construir una aplicación de página única requiere más trabajo en términos de tráfico a través de la red en comparación con una aplicación de múltiples páginas.

Pero a menudo se hacen en serie, creando la clásica cascada. Entonces, las aplicaciones de página única son propensas a cascadas porque estamos obteniendo datos dentro de los componentes. Idealmente, nos gustaría hacer esto en paralelo entre sí, lo cual es posible. Hay cosas como React Query que pueden ayudar con esto. También hay cosas como el nuevo enrutador de React, que se pueden usar en combinación entre sí, que probablemente es la mejor manera de hacer aplicaciones de página única, creo, para obtener datos. Pero puedes obtener datos en paralelo con el nuevo enrutador de React, porque no se obtiene desde dentro del componente. Así que eso es bueno para las aplicaciones de página única. Pero en última instancia, requiere más trabajo construir una aplicación de página única en términos de tráfico a través de la red que una aplicación de múltiples páginas.

5. Ventajas de las Aplicaciones de Página Única

Short description:

Las aplicaciones de múltiples páginas pierden cuando queremos ir a la página 2. Las aplicaciones de página única permiten la persistencia del estado y un contenido rápido. Proporcionan menos cascadas y permiten escribir la lógica de la interfaz de usuario una vez. La precarga de enlaces y la pre-renderización no son aplicables a las aplicaciones de página única. Construir la interfaz de usuario necesaria y mantener un estado consistente son ventajas de las aplicaciones de página única. Es posible utilizar un enfoque híbrido que combine lo mejor de ambos con Remix.

Vale. Entonces, las aplicaciones de múltiples páginas ganan hasta que queremos ir a la página 2. Esta es la razón por la que nos gustan las aplicaciones de página única, porque con una aplicación de múltiples páginas, JavaScript se cierra. Es muy triste. No podemos mantener el estado, el estado persistente, en el cliente cuando esto sucede. Por eso, en los días de jQuery, ¿dónde pondríamos nuestro estado? No había Redux o bibliotecas de gestión de estado en ese entonces. ¿Alguien hizo alguna vez esos sitios de jQuery de los años 2000? Pondrías el estado en el DOM.

Así que en la página 2, tenemos que construir todo de nuevo, todo lo que ya teníamos. Ya teníamos todas estas cosas, y sin embargo las estamos construyendo de nuevo ahora, es casi como un actualización de página. Quiero decir, realmente lo es. Una actualización de página. ¿De acuerdo? La aplicación de página única simplemente dice, oh, ¿quieres ir a la página 2? De acuerdo, bam, bam, vamos a buscar la página 2. Así que creo que esto es una ventaja para las aplicaciones de página única. Nos gustan aspectos de ambas, ¿verdad? Nos gusta el contenido inicial rápido. Nos gustan las navegaciones del lado del cliente por aquí. Pero por aquí, nos gustan menos cascadas, y por aquí, nos gusta escribir la lógica de la interfaz de usuario una vez. Quiero decir, dependiendo de cómo estés construyendo tu aplicación de múltiples páginas, si estás utilizando una tecnología en el backend y luego JavaScript en el frontend, a veces eso puede ser diferente a hacerlo en JavaScript en ambos lados. ¿Recuerdas esas cosas de precarga de enlaces o pre-renderización de las que estábamos hablando? La razón por la que tal vez algunos de ustedes no han oído hablar de esto es porque no se puede usar realmente esto en una aplicación de página única. Ni siquiera tendría sentido porque vas a hacer transiciones del lado del cliente. Así que eso es algo que obtenemos por aquí. ¿Qué tal construir solo la interfaz de usuario necesaria? Tuvimos que volver y reconstruir todo de nuevo, ¿verdad, cuando hicimos la aplicación de múltiples páginas? Y finalmente, estados en el frontend. A veces necesitas un estado consistente y persistente. Y así es agradable poder hacer JavaScript y no tener que reiniciarlo entre las transiciones de página. De acuerdo. Así que durante diez años, al menos para mí, parecía que tenías que estar en un mundo o en el otro. Y hoy no es así. Puedes hacer una combinación de lo mejor de ambos. Eso es realmente de lo que trata esta charla. Vamos a hablar de Remix.

6. Construyendo Páginas con Remix

Short description:

Pero en realidad no se trata solo de Remix, porque muchos de estos conceptos híbridos también se aplicarían a Next o cualquier otro framework de JavaScript que también esté haciendo híbridos. Construyamos esta página con Remix conceptualmente. Está compuesta por tres capas: diseño principal, subdiseño y página. Estos tres cargadores se ejecutan en paralelo, obteniendo datos y proporcionando su contenido a sus respectivos componentes para crear colectivamente un archivo HTML. El JavaScript en este framework es un archivo de manifiesto que conoce todo sobre la página, incluidos los componentes que la construyeron y la opción de transicionar a otra página.

Pero en realidad no se trata solo de Remix, porque muchos de estos conceptos híbridos también se aplicarían a Next o cualquier otro framework de JavaScript que también esté haciendo híbridos.

De acuerdo. Así que vamos a incorporar el framework. Construyamos esta página con Remix conceptualmente. Veamos. Está compuesta por tres capas. ¿Correcto? Tenemos un diseño principal. Tenemos un subdiseño. Y tenemos la página. Por lo tanto, construyes diferentes archivos para esto, al igual que lo harías en Next. Y hay una función de carga, algo así como el get server side props, que se ejecutaría solo en el servidor.

Entonces, esto es nosotros haciendo la solicitud a la página de inicio, y se necesitaron tres componentes para hacer la página de inicio. Estos tres cargadores se ejecutan en paralelo entre sí, obteniendo datos, proporcionando su contenido a sus respectivos componentes, todo junto para crear colectivamente un archivo HTML y devolverlo. Por lo tanto, en este punto, realmente no es tan diferente a... Bueno, realmente no es diferente a una aplicación de múltiples páginas. Todavía tenemos que obtener JavaScript, ¿verdad? Pero, ¿qué hay en este JavaScript? Aquí es donde las cosas comienzan a cambiar. ¿Son solo eventos como en la situación clásica de una aplicación de múltiples páginas? No realmente. ¿Es cada posible interfaz de usuario a la que podríamos querer ir, como en una aplicación de una sola página? No realmente. Porque ninguno de los dos es realmente ideal. Entonces, ¿qué hay aquí? Lo llamamos un archivo de manifiesto. Y sabe todo sobre la página en la que estamos, incluidos los diferentes componentes que construyeron esta página y si quisiéramos ir a la página 2, porque tenemos los enlaces que usamos para construir la página 1. Sabe que si hiciéramos la transición a la página 2, no necesitaríamos todo de nuevo, porque la página 2 usa el mismo diseño principal y subdiseño, por lo que teóricamente solo necesitaría la información de la página 2. ¿Significa eso que tenemos que hacer una actualización de página completa, como en una aplicación de múltiples páginas, y simplemente obtener eso? Bueno, no, no realmente. Ahora ese cargador que se usaba en conjunto con el componente en el servidor para construir HTML, ahora ese cargador también se puede usar como un punto final RESTful. Cuando quieres hacer clic para ir a la página 2, esta será una transición del lado del cliente donde enviamos... Haremos dos solicitudes en paralelo. Enviamos datos desde el cargador y el código JavaScript para crear ese componente.

7. Code Splitting en Aplicaciones de Página Única

Short description:

Una aplicación de página única que ya está haciendo la división de código por ti, y ni siquiera tienes que pensarlo. Sin mencionar que está haciendo la división de código de una manera en la que obtiene ambas cosas en paralelo.

Lo cual es solo un archivo, por lo que es almacenable en caché. Y ahora estás en la página 2. Entonces es como una aplicación de página única en ese punto. Una aplicación de página única que ya está haciendo la división de código por ti, y ni siquiera tienes que pensarlo. Sin mencionar que está haciendo la división de código de una manera en la que obtiene ambas cosas en paralelo. ¿Qué sucedería en teoría si estuvieras haciendo una aplicación de página única y quisieras dividir el código de una de tus rutas? Tendrías que ir al servidor para obtener ese archivo, traerlo de vuelta, ahora quiere hacer algunas cosas de efectos de uso, lo cual requeriría una solicitud en serie de vuelta al servidor para obtener data. Todo esto sucede en paralelo, porque conocemos toda la historia. Remix está construido sobre React Router, y React Router conoce todo el panorama. Lo cual es realmente agradable.

8. Optimización del rendimiento con Remix

Short description:

Anticipa las necesidades futuras y obténlas por adelantado. Remix puede hacer un intento de precarga de enlace, dándote una ventaja de unos pocos milisegundos. La renderización de precarga permite descargar contenido para múltiples páginas por adelantado. Esto es más rápido que los sitios web estáticos. Almacenar en caché los datos más cerca mejora el rendimiento. Remix puede alojarse en cualquier entorno de servidor JavaScript, como CloudFlare y WebWorkers. No es necesario un CDN, ya que Remix ya está tan cerca como un CDN con JavaScript en ejecución.

Bien, anticipa las necesidades futuras y obténlas por adelantado. Bien, todo lo que he explicado hasta ahora es bastante bueno. Pero, ¿qué sucede si pasamos el cursor sobre un enlace? Simplemente pasar el cursor sobre él, React... Perdón, Remix puede hacer un intento de precarga de enlace, y al pasar el cursor sobre él, esto ya se iniciará. Por lo tanto, te dará solo unos pocos milisegundos de ventaja. Y eso es bastante genial, pero ¿sabes qué lo haría realmente rápido? También puedes hacer una renderización de precarga. Y estando en la página 2, ya estamos descargando en segundo plano todo el contenido para la página 2, 3 y 4. O 3, 4 y 5, debería decir. Pero esto no es como el estándar que te mostré hace un segundo, que habría... Para una aplicación de varias páginas, habría vuelto y obtenido cargas completas de HTML y las habría preparado y listo. Esto solo obtiene las partes que necesitamos. Esto puede ser más rápido que los sitios web estáticos. En este punto. ¿Puede ser más rápido? Bueno, si obtienes estos datos precargados desde el otro lado del mundo, eso es una cosa. Pero, ¿qué sucede si lo almacenamos en caché un poco más cerca? Ahora puedes obtener estos datos precargados cerca. ¿Podríamos mejorarlo aún más? Una cosa que Remix puede hacer es alojarse en cualquier entorno de servidor JavaScript. Específicamente no dije node. Lugares como CloudFlare y WebWorkers están haciendo cosas como V8 en los servidores en el borde. Puedes alojar Remix allí. Ni siquiera necesitas un CDN en ese punto porque ya estás tan cerca como estaría un CDN pero con JavaScript en ejecución. ¿Podríamos hacerlo aún más rápido? Entonces, estos cargadores, digamos que estamos trabajando con el cargador de página, bueno, el cargador de página podría necesitar dos o tres solicitudes diferentes a la base de datos para crear la página.

9. Optimización de la obtención de datos con Remix

Short description:

Con Remix, puedes priorizar datos importantes como usuarios y productos, y comenzar la respuesta temprano. La página HTML se forma completamente y se muestra al usuario, y cuando los comentarios se resuelven más tarde, se transmiten a la página con un indicador de carga. Este enfoque hace que los sitios web sean increíblemente rápidos.

Entonces, digamos que hay obtener usuario, obtener productos y obtener comentarios. Normalmente los ejecutarías en paralelo, lo que significa que estás esperando al más lento para terminar antes de construir la página HTML y devolverla, ¿verdad? Pero una de las cosas nuevas que puedes hacer con Remix es designar uno de estos como no tan importante como el otro. Entonces, ¿qué pasa si obtener usuario y obtener productos son más importantes y se resuelven antes? ¿Por qué deberíamos detener lo que el usuario ve hasta que obtengamos los comentarios cuando los comentarios no son tan importantes? Estaría bien si tuviéramos un indicador de carga solo para los comentarios, pero teníamos los datos reales data mostrando para estos otros dos. Entonces, lo que puedes hacer es designar estos dos y puedes comenzar la respuesta temprano. Luego, el usuario está viendo un archivo HTML que está completamente formado, habilitado para SEO y todo eso, y luego, cuando los comentarios se resuelven un momento después, se pueden transmitir a la posición que habrían ocupado en esa página con un indicador de carga.

10. Streaming and Deferring in Remix for Fast Websites

Short description:

El usuario puede ver un archivo HTML completamente formado mientras espera que se carguen los comentarios. Los comentarios se transmiten a la página con un indicador de carga. Remix permite mezclar promesas en la página, lo que la hace increíblemente rápida. El cliente utiliza un indicador de carga mientras espera los resultados transmitidos de los comentarios. Reacttraining.com ha logrado una métrica de rendimiento de 100. Con prerender prefetch, la validez de la página de prefetch depende de cómo se configure la memoria caché.

Luego, el usuario está viendo un archivo HTML completamente formado, habilitado para SEO y todo eso, y luego, cuando la obtención de comentarios se resuelve un momento después, se pueden transmitir a la posición que habrían ocupado en esa página con un indicador de carga.

Así es como se ve eso. Esto es Remix y tenemos nuestro cargador y nuestro componente. Así que imagina que tenemos esta promesa que está esperando obtener usuario y obtener producto. Tenemos la palabra clave await allí. Observa la siguiente línea de código, es interesante. Obtener comentarios está devolviendo una promesa, pero no estamos esperando por ella.

Entonces, tuvimos que esperar a que la primera línea de código terminara antes de que se ejecutara la segunda línea de código, pero no estamos esperando en serie los comentarios. Simplemente estamos obteniendo inmediatamente la promesa y devolviendo esta cosa llamada defer. Normalmente en Remix se devuelve una función llamada JSON. Pero si usas defer, puedes mezclar promesas en esto, y luego es como si estuviéramos construyendo la página a partir de objetos y matrices, lo que sea que sea usuario y producto, pero también una parte que es una promesa.

Ahora, usas el usuario y los productos como de costumbre, y usas la promesa en esta cosa llamada await. Lo pones en este resolve. Una vez que esté listo. Entonces, todo esto se está construyendo en el servidor en este momento, pero se ha enviado al cliente en este punto. Y ahora el cliente está utilizando un indicador de carga mientras espera los resultados transmitidos de los comentarios. Bastante genial. Esto es en lo que he estado construyendo sitios web últimamente, y ha sido realmente fantástico. Hace que los sitios web sean increíblemente rápidos. Acabo de verificar Reacttraining.com hace unas horas para ver cuáles eran sus métricas de rendimiento. Tenían 100, lo cual es gracioso porque en los Estados Unidos tenían 98 o algo así, pero aquí tenían 100. Así que eso es genial. De todos modos, espero que hayas disfrutado. Muchas gracias. Gracias.

Oh, muchas buenas preguntas sobre prerenderizado. Con el prerenderizado real de prefetch, ¿cuánto tiempo es válida la página de prefetch? Simplemente configuras la memoria caché como quieras en esa respuesta, así que puedes decidir eso como desees. Genial. Fácil. Cachéalo como quieras.

11. Solving Client-Side State and Pre-rendering

Short description:

Remix resuelve la desventaja de necesitar y compartir el estado del lado del cliente entre rutas mediante el uso de proveedores de contexto clásicos. Las transiciones de página son del lado del cliente, por lo que no se descarga y vuelve a cargar JavaScript. En cuanto al rendimiento, no he utilizado la API de trabajadores para obtener datos en segundo plano. Si tienes una página de descripción general de productos con muchos productos, puedes experimentar con el pre-renderizado y la transmisión de contenido por debajo del pliegue. El pre-renderizado al pasar el cursor se realiza en segundo plano con una solicitud Ajax.

¿Cómo ha resuelto Remix la desventaja de necesitar y compartir, cito, el estado del lado del cliente entre rutas? ¿Estado del lado del cliente entre rutas? Puedes usar proveedores de contexto clásicos. Las transiciones de página son del lado del cliente, por lo que no se descargará y volverá a cargar tu JavaScript, así es como lo hago. Seguro que hay otras formas, pero así es como lo he estado haciendo. Sí, suena bien. Hablando de rendimiento y técnicas para eso, ¿recomendarías o has utilizado la API de trabajadores para obtener datos en segundo plano? No lo he hecho, así que no sé mucho al respecto. Lo siento. Ahí lo tienes. Ya hemos hablado de eso. Ya hemos hablado de eso. Bien, si tuvieras una página de descripción general de productos, digamos, y esta página tuviera más de 100 productos y cada producto tuviera su propia página, ¿deberías pre-renderizar todo? No lo sé, si va a ser como, si va a ser así, podría experimentar con eso, pero si muestra cientos de productos por página, tal vez los separe en el servidor en ese valor diferido y cargue algunas cosas con anticipación, pero las cosas por debajo del pliegue podrían transmitirse. Tal vez experimentaría con eso, y luego probablemente experimentaría con otros enfoques. No sé la respuesta perfecta para eso porque suena como una arquitectura para la cual no deberías tener una respuesta perfecta a menos que juegues con ella. Así que jugaría con eso. ¿Quizás algo como un tipo de intersección? Sí, algo así. ¿En algún punto al desplazarse? Sí, suena bien. Creo que... Quieres devolver algo para que sea bueno para el SEO. Sí, exactamente. Pero tal vez si no puedes ver todo de una vez. Pero no puedes ver todo cuando cargas la página por primera vez, está por debajo del pliegue. Así que quiero decir, el usuario va a pensar que todo estaba ahí. Van a mirar algunas cosas. Van a empezar a desplazarse. Esas cosas simplemente estarán allí y las imágenes se cargarán de forma diferida, ¿verdad? Sí. Ahí lo tienes. Eso me parece bien.

12. Pre-renderizado al pasar el cursor

Short description:

¿El pre-renderizado al pasar el cursor se realiza en el lado del servidor o en el lado del cliente? Se obtienen cosas en segundo plano, por lo que no ralentiza significativamente las cosas. Al pasar el cursor se activa una solicitud Ajax, lo cual puede consumir más ancho de banda si no se utiliza con moderación. Esta charla se centra en la velocidad.

¿El pre-renderizado al pasar el cursor se realiza en el lado del servidor o en el lado del cliente? Si es en el último caso, ¿no ralentizará todo al mover el ratón por todas partes? Bueno, se obtienen cosas en segundo plano. Así que quiero decir, si estás en cualquier sitio web grande como Twitter o Facebook, quiero decir, si quieres ir a la pestaña de red, siempre estará haciendo todo tipo de cosas en segundo plano. Así que no creo que realmente ralentice las cosas. Pero cuando pasas el cursor sobre algo, simplemente hacemos una solicitud Ajax para obtener algo. Y si al final no lo utilizas, supongo que estás consumiendo un poco más de ancho de banda. Así que úsalo con moderación porque si alguien está en un dispositivo móvil, se obtiene más data pero se obtiene una experiencia increíblemente rápida. Sí. El dispositivo móvil es uno de los interesantes. Esta no era la charla sobre ahorrar dinero. Esta era la charla sobre la velocidad.

13. Remix Adoption and Prefetching

Short description:

¿Sabes si Remix adoptará Reactor o Components? Parece que está experimentando con ello y está obteniendo un rendimiento realmente rápido. Los React Server Components pueden no mejorar algo que ya es extremadamente rápido. Remix ya es bastante rápido, tanto si los utilizan como si no. Puede depender de las preferencias personales y de las necesidades de la arquitectura específica. Algunas personas tienen preocupaciones sobre el prefetch y el prerender, especialmente con el ancho de banda limitado en las aplicaciones móviles. Puedes crear tu propio componente de enlace para manejar diferentes entornos. Tenemos una masterclass sobre Remix si quieres aprender más.

Esto no fue el tienes un mal día. ¿Sabes si Remix adoptará Reactor o Components? Creo que sí. Si me lo hubieras preguntado hace un mes, probablemente habría dicho que no. No hablo mucho personalmente con Michael y Ryan sobre eso porque ambos están ocupados y yo estoy ocupado con la formación de React y cosas así. Pero podría preguntarle a Ryan qué piensa al respecto. Pero obtengo información sobre Remix como cualquier otra persona en Twitter. Trato de no molestarlos demasiado. ¿Cuál es tu opinión? ¿Quieres ver eso?

Bueno, parece que está experimentando con ello. Hace solo uno o dos días tuiteó que estaba realizando experimentos con ello y que le estaba proporcionando un rendimiento realmente rápido. Pero creo que es consciente de algunas limitaciones al hacerlo. Es un gran compromiso. Y no puedo imaginar que esto vaya a ser realmente controvertido. ¿Esto todavía se está grabando? No creo que los React Server Components vayan a mejorar algo que ya es extremadamente rápido. Ese es más rápido. Creo que Remix ya va a ser bastante rápido, tanto si deciden usarlos como si no. Creo que va a depender de si te gusta la arquitectura o tal vez tienes una situación en la que enviar menos JavaScript y los React Server Components podrían darte eso. Tal vez se reduzca a ese tipo de cosas. No creo que te ofrezca un beneficio de rendimiento sobre lo que ofrece Remix. Genial. Interesante.

Hay un par de preguntas que voy a agrupar en un tema, que es que no todos están completamente convencidos del prefetch y el prerender. Una persona dice que si tienes un ancho de banda limitado en una aplicación móvil, podría afectarla, o... Pensé en esta pregunta antes de que la hicieran. Lo pensé hoy mismo. Si realmente me preocupara eso, podría crear mi propio componente de enlace, donde pases los datos al componente de enlace real, y en mi componente de enlace, tal vez detectar si estás en un dispositivo móvil, tal vez tener una condición en la que no hagamos el prefetching, pero en un entorno de escritorio, sí lo haríamos. Podrías utilizar tus propios trucos habituales de React para averiguar ese tipo de cosas. Sí. Parece que vale la pena intentarlo. Sí. Y tenemos una masterclass sobre Remix, así que avísanos si quieres aprender más sobre ello.

14. Prerendering with React and Data Fetching

Short description:

¿Podemos hacer prerenderizado usando React sin Remix? React en el servidor carece de una solución para la obtención de datos, por lo que frameworks como Next y Remix proporcionan soluciones. Los componentes del servidor de React son la última adición. Hasta los componentes del servidor de React, la obtención de datos en el servidor estaba limitada. Se recomienda utilizar un framework en lugar de una aplicación clásica de varias páginas.

Sí. Llámalos. Una última pregunta. ¿Podemos hacer prerenderizado usando React pero sin Remix? Supongo que eso serían tal vez los componentes del servidor. Prerenderizado. Quiero decir, siempre podrías usar esa versión estándar de prerenderizado, si estás haciendo... Lo bueno de React en el servidor es que no hay una solución para la obtención de datos, por eso todos usan un framework, porque tienes que... Por eso Next tiene las props del lado del servidor de Git y nosotros tenemos el cargador, y luego están haciendo los componentes del servidor de React, que Así que no hay... Hasta los componentes del servidor de React, realmente no hay una solución para obtener datos en el servidor, y así podrías hacer una aplicación clásica de varias páginas. Sí. O usar un framework. Sí, sin hacer... Espera. Sí. Realmente no haría eso, pero...

Genial. Bueno, muchas gracias por tu tiempo, Brad. Gracias a todos. Pueden encontrar a Brad en persona en el stand de los oradores después de esto, y si están en casa, en spatial.chat, y pueden hacer aún más preguntas. Así que gracias.

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

React Advanced Conference 2022React Advanced Conference 2022
25 min
A Guide to React Rendering Behavior
Top Content
React is a library for "rendering" UI from components, but many users find themselves confused about how React rendering actually works. What do terms like "rendering", "reconciliation", "Fibers", and "committing" actually mean? When do renders happen? How does Context affect rendering, and how do libraries like Redux cause updates? In this talk, we'll clear up the confusion and provide a solid foundation for understanding when, why, and how React renders. We'll look at: - What "rendering" actually is - How React queues renders and the standard rendering behavior - How keys and component types are used in rendering - Techniques for optimizing render performance - How context usage affects rendering behavior| - How external libraries tie into React rendering
React Summit Remote Edition 2021React Summit Remote Edition 2021
33 min
Building Better Websites with Remix
Top Content
Remix is a new web framework from the creators of React Router that helps you build better, faster websites through a solid understanding of web fundamentals. Remix takes care of the heavy lifting like server rendering, code splitting, prefetching, and navigation and leaves you with the fun part: building something awesome!
React Advanced Conference 2021React Advanced Conference 2021
39 min
Don't Solve Problems, Eliminate Them
Top Content
Humans are natural problem solvers and we're good enough at it that we've survived over the centuries and become the dominant species of the planet. Because we're so good at it, we sometimes become problem seekers too–looking for problems we can solve. Those who most successfully accomplish their goals are the problem eliminators. Let's talk about the distinction between solving and eliminating problems with examples from inside and outside the coding world.
Remix Conf Europe 2022Remix Conf Europe 2022
23 min
Scaling Up with Remix and Micro Frontends
Top Content
Do you have a large product built by many teams? Are you struggling to release often? Did your frontend turn into a massive unmaintainable monolith? If, like me, you’ve answered yes to any of those questions, this talk is for you! I’ll show you exactly how you can build a micro frontend architecture with Remix to solve those challenges.
React Advanced Conference 2022React Advanced Conference 2022
30 min
Using useEffect Effectively
Top Content
Can useEffect affect your codebase negatively? From fetching data to fighting with imperative APIs, side effects are one of the biggest sources of frustration in web app development. And let’s be honest, putting everything in useEffect hooks doesn’t help much. In this talk, we'll demystify the useEffect hook and get a better understanding of when (and when not) to use it, as well as discover how declarative effects can make effect management more maintainable in even the most complex React apps.
React Summit 2023React Summit 2023
32 min
Speeding Up Your React App With Less JavaScript
Too much JavaScript is getting you down? New frameworks promising no JavaScript look interesting, but you have an existing React application to maintain. What if Qwik React is your answer for faster applications startup and better user experience? Qwik React allows you to easily turn your React application into a collection of islands, which can be SSRed and delayed hydrated, and in some instances, hydration skipped altogether. And all of this in an incremental way without a rewrite.

Workshops on related topic

React Summit 2023React Summit 2023
170 min
React Performance Debugging Masterclass
Featured WorkshopFree
Ivan’s first attempts at performance debugging were chaotic. He would see a slow interaction, try a random optimization, see that it didn't help, and keep trying other optimizations until he found the right one (or gave up).
Back then, Ivan didn’t know how to use performance devtools well. He would do a recording in Chrome DevTools or React Profiler, poke around it, try clicking random things, and then close it in frustration a few minutes later. Now, Ivan knows exactly where and what to look for. And in this workshop, Ivan will teach you that too.
Here’s how this is going to work. We’ll take a slow app → debug it (using tools like Chrome DevTools, React Profiler, and why-did-you-render) → pinpoint the bottleneck → and then repeat, several times more. We won’t talk about the solutions (in 90% of the cases, it’s just the ol’ regular useMemo() or memo()). But we’ll talk about everything that comes before – and learn how to analyze any React performance problem, step by step.
(Note: This workshop is best suited for engineers who are already familiar with how useMemo() and memo() work – but want to get better at using the performance tools around React. Also, we’ll be covering interaction performance, not load speed, so you won’t hear a word about Lighthouse 🤐)
React Summit Remote Edition 2021React Summit Remote Edition 2021
177 min
React Hooks Tips Only the Pros Know
Top Content
Featured Workshop
The addition of the hooks API to React was quite a major change. Before hooks most components had to be class based. Now, with hooks, these are often much simpler functional components. Hooks can be really simple to use. Almost deceptively simple. Because there are still plenty of ways you can mess up with hooks. And it often turns out there are many ways where you can improve your components a better understanding of how each React hook can be used.You will learn all about the pros and cons of the various hooks. You will learn when to use useState() versus useReducer(). We will look at using useContext() efficiently. You will see when to use useLayoutEffect() and when useEffect() is better.
React Advanced Conference 2021React Advanced Conference 2021
174 min
React, TypeScript, and TDD
Top Content
Featured WorkshopFree
ReactJS is wildly popular and thus wildly supported. TypeScript is increasingly popular, and thus increasingly supported.

The two together? Not as much. Given that they both change quickly, it's hard to find accurate learning materials.

React+TypeScript, with JetBrains IDEs? That three-part combination is the topic of this series. We'll show a little about a lot. Meaning, the key steps to getting productive, in the IDE, for React projects using TypeScript. Along the way we'll show test-driven development and emphasize tips-and-tricks in the IDE.
React Advanced Conference 2021React Advanced Conference 2021
145 min
Web3 Workshop - Building Your First Dapp
Top Content
Featured WorkshopFree
In this workshop, you'll learn how to build your first full stack dapp on the Ethereum blockchain, reading and writing data to the network, and connecting a front end application to the contract you've deployed. By the end of the workshop, you'll understand how to set up a full stack development environment, run a local node, and interact with any smart contract using React, HardHat, and Ethers.js.
React Summit 2023React Summit 2023
151 min
Designing Effective Tests With React Testing Library
Featured Workshop
React Testing Library is a great framework for React component tests because there are a lot of questions it answers for you, so you don’t need to worry about those questions. But that doesn’t mean testing is easy. There are still a lot of questions you have to figure out for yourself: How many component tests should you write vs end-to-end tests or lower-level unit tests? How can you test a certain line of code that is tricky to test? And what in the world are you supposed to do about that persistent act() warning?
In this three-hour workshop we’ll introduce React Testing Library along with a mental model for how to think about designing your component tests. This mental model will help you see how to test each bit of logic, whether or not to mock dependencies, and will help improve the design of your components. You’ll walk away with the tools, techniques, and principles you need to implement low-cost, high-value component tests.
Table of contents- The different kinds of React application tests, and where component tests fit in- A mental model for thinking about the inputs and outputs of the components you test- Options for selecting DOM elements to verify and interact with them- The value of mocks and why they shouldn’t be avoided- The challenges with asynchrony in RTL tests and how to handle them
Prerequisites- Familiarity with building applications with React- Basic experience writing automated tests with Jest or another unit testing framework- You do not need any experience with React Testing Library- Machine setup: Node LTS, Yarn
React Summit 2022React Summit 2022
136 min
Remix Fundamentals
Top Content
Featured WorkshopFree
Building modern web applications is riddled with complexity And that's only if you bother to deal with the problems
Tired of wiring up onSubmit to backend APIs and making sure your client-side cache stays up-to-date? Wouldn't it be cool to be able to use the global nature of CSS to your benefit, rather than find tools or conventions to avoid or work around it? And how would you like nested layouts with intelligent and performance optimized data management that just works™?
Remix solves some of these problems, and completely eliminates the rest. You don't even have to think about server cache management or global CSS namespace clashes. It's not that Remix has APIs to avoid these problems, they simply don't exist when you're using Remix. Oh, and you don't need that huge complex graphql client when you're using Remix. They've got you covered. Ready to build faster apps faster?
At the end of this workshop, you'll know how to:- Create Remix Routes- Style Remix applications- Load data in Remix loaders- Mutate data with forms and actions