Next.js: Reshaping Arquitectura de Aplicaciones Web para la Excelencia en Rendimiento

Rate this content
Bookmark

¿Estás luchando por lograr un rendimiento óptimo en tus aplicaciones web? ¿No estás seguro de cómo gestionar eficazmente las rutas de tu aplicación mientras garantizas la máxima seguridad para tus datos sensibles? Estos son los problemas más recientes que encontramos en l'Oréal Tech Accelerator, donde nuestros usuarios solían esperar frente a pantallas blancas vacías mucho antes de obtener la información necesaria. Después de una extensa investigación y deliberación, consideramos Next.js como una posible solución a nuestras preocupaciones. Sin embargo, adoptar Next.js nos presentó un nuevo conjunto de desafíos. Tuvimos que repensar nuestra arquitectura y determinar el mejor enfoque para integrar el frontend, backend y nuestros sistemas centrales de backend. En esta charla discutiremos con más detalle los obstáculos que enfrentamos y las soluciones innovadoras que implementamos para superarlos.

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

Mia NASR KHNEISSER
Mia NASR KHNEISSER
9 min
18 Jun, 2024

Comments

Sign in or register to post your comment.
Video Summary and Transcription
Esta charla discute cómo Next.js se utilizó para remodelar la arquitectura de aplicaciones web para lograr una excelencia en rendimiento. Next.js permite el renderizado del lado del servidor (SSR) y el renderizado del lado del cliente (CSR), mejorando el rendimiento y la experiencia del usuario. La implementación de Next.js en la aplicación resultó en cargas de página iniciales más rápidas, tiempo reducido de pantalla blanca y mejor estado de carga. Es importante utilizar las diferentes opciones de renderizado correctamente para maximizar el rendimiento.

1. Introducción a Next.js y Arquitectura de Aplicaciones Web

Short description:

Soy una desarrolladora full-stack en L'Oreal Tech Accelerator y hoy hablaré sobre cómo remodelamos nuestra arquitectura de aplicaciones web utilizando Next.js para lograr una excelente rendimiento. Next.js nos permite renderizar código tanto en el servidor como en el lado del cliente, mejorando el rendimiento y la experiencia del usuario. Estamos pasando de una aplicación de una sola página a Next.js, lo que nos permite tener un archivo index.html y bundled.js por página, reduciendo la cantidad de datos innecesarios en cada página. La renderización en el lado del cliente reduce la carga del servidor y simplifica la lógica del backend, pero tiene una carga inicial de página más lenta. La renderización en el lado del servidor llena el archivo HTML con datos, pero se requiere hidratación para la interactividad.

Hola, mi nombre es Myrna Sochnaeser y soy una desarrolladora principal full-stack en L'Oreal Tech Accelerator. Tech Accelerator es un departamento interno dedicado a impulsar la innovación digital en L'Oreal. Diseñamos aplicaciones para ayudar al personal de L'Oreal a ser más productivo. Hoy veremos cómo remodelamos nuestra arquitectura de aplicaciones web para lograr una excelencia en el rendimiento y por qué decidimos utilizar Next.js. En L'Oreal, hay algunos factores que nos permiten determinar si tenemos una buena aplicación, como el rendimiento, la accesibilidad, la seguridad, etc. Pero hoy nos centraremos en el rendimiento, que indirectamente también nos permite mejorar nuestra experiencia de usuario. En Tech Accelerator, tenemos una arquitectura en la que todas nuestras aplicaciones dependen. Nuestro navegador intentará obtener los datos o la información que necesita desde el CDN. Si no tiene éxito, los obtendrá de las dos aplicaciones alojadas en App Engine. Nuestro backend, que contiene todos nuestros puntos finales, está alojado en CloudRAM y los datos están alojados en Cloud SQL. Intentaremos reemplazar las dos aplicaciones alojadas en App Engine con Next.js y tener solo una aplicación. Refresquemos nuestra memoria mientras revisamos las diferentes formas de renderización que podemos hacer con Next.js. Next.js es un marco de trabajo que nos permite crear una aplicación web donde partes de nuestro código pueden renderizarse tanto en el servidor como en el cliente. Por eso hablamos de renderización en el lado del cliente o pre-renderizado en el servidor. Incluso el pre-renderizado en el servidor se divide en muchos tipos, como la renderización en el lado del servidor o la generación estática o otros. Al principio teníamos una aplicación de una sola página donde necesitábamos descargar un archivo HTML y un archivo JS grande para todas las aplicaciones. El archivo HTML estaba casi vacío y el archivo bundled contenía toda la información necesaria. Pero con Next.js, tendremos un archivo index.html en el archivo chunk o bundled.js por página. Y estos archivos solo contendrán lo necesario para renderizar esta página específica en la que nos encontramos. ¿Cómo funciona la renderización en el lado del cliente? Después de construir nuestro frontend, obtendremos dos archivos, el index.html y el bundled.js que se almacenaron en el CDN. Una vez que intentemos acceder a nuestra aplicación, el navegador obtendrá el index.html del CDN y luego descargaremos, el navegador descargará el archivo JS y lo ejecutará. Y una vez que se complete la ejecución, la página web será visible para el usuario. Pero aún necesitaremos obtener los datos del servidor para ajustar los componentes con los datos correctos y eliminar el estado de carga. Entonces, en resumen, tendremos una página en blanco hasta que descarguemos y ejecutemos el bundled.js y la página de carga hasta que obtengamos los datos que necesitamos. Con la renderización en el lado del cliente, reducimos la carga del servidor, ya que el servidor solo necesita proporcionar el HTML inicial y el archivo JavaScript, y también simplificamos la lógica del backend, ya que el servidor actuará principalmente como una API de datos, lo que lleva a un código de backend más limpio y simple. Pero, por otro lado, tenemos una carga inicial de página más lenta, ya que el navegador necesita descargar y ejecutar el JavaScript antes de renderizar la página o mostrar cualquier cosa.

En cuanto a la renderización en el lado del servidor, el navegador obtendrá el archivo HTML del servidor. El archivo HTML se llenará con los datos correctos. Podemos ver directamente los componentes llenos con los datos correctos en el navegador, pero no estarán hidratados. La interacción con los botones y los enlaces

2. Mejorando el rendimiento con Next.js

Short description:

Con SSR, obtenemos cargas de página iniciales más rápidas y un mejor rendimiento para dispositivos de baja gama o conexiones a internet lentas. Sin embargo, aumenta la carga del servidor y reduce la interactividad. La generación de sitios estáticos es ideal para proporcionar cargas de página más rápidas y manejar contenido estático. Next.js simplifica el proceso, mejorando el estado de carga inicial y la experiencia del usuario. Implementamos esto en nuestra aplicación, reduciendo el tiempo de pantalla en blanco y los estados de carga. Next.js ofrece diferentes opciones de renderizado, pero es crucial utilizarlas correctamente para maximizar el rendimiento.

La aplicación no funcionará hasta que obtengamos y descarguemos el archivo JS desde el CDN. Podemos ver que el bloque de página en blanco se reduce y podemos ver directamente algo en la aplicación web. Por lo tanto, con SSR, tenemos una carga de página inicial más rápida y un mejor rendimiento para usuarios en dispositivos de baja gama o con una conexión a internet lenta, ya que la mayor parte del proceso de renderizado es manejado por el servidor. Pero, por otro lado, aumentamos la carga del servidor, especialmente al lidiar con un gran número de solicitudes simultáneas, lo que afecta los tiempos de respuesta del servidor. Y reducimos la interactividad, ya que pueden ser necesarias solicitudes adicionales para actualizar el contenido de la página. Por lo tanto, SSR es perfecto para sitios web de contenido. La generación de sitios estáticos es similar al renderizado en el lado del servidor, pero con una pequeña diferencia: tanto el index.html como el bundle.js se crean durante la construcción de la aplicación y se almacenan en el CDN. Por lo tanto, mostramos una página interactiva muy rápido. Debes utilizar la generación de sitios estáticos con Next.js cuando desees proporcionar cargas de página más rápidas y cargar páginas con contenido pesado o contenido que nunca cambiará, es decir, estático. Por ejemplo, para blogs, documentación, portafolios, etc. Dicho esto, te daré un poco de contexto sobre la aplicación que queremos mejorar en términos de rendimiento. La aplicación es una aplicación de una sola página y tenemos tres tipos de páginas. Tenemos la página de inicio que es la misma para todos los usuarios y es estática, una página para visualizar los datos y una página para crear datos basados en una configuración preestablecida y un algoritmo de API. La aplicación es utilizada por 40 usuarios en seis países diferentes y tenemos un poco más de seis gigabytes de datos. En esta aplicación, el usuario tiene aproximadamente dos segundos de pantalla en blanco. Esto se debe a que para que la aplicación web sea visible y funcional, el navegador necesita descargar el archivo JS y ejecutar React. Pero como el archivo JS es grande, la descarga y ejecución del archivo lleva un poco de tiempo. Una vez que el usuario comienza a ver algo en la aplicación web, es el estado de carga durante un cierto período de tiempo dependiendo de la página que esté viendo. Esto se debe a que necesitamos esperar a que el navegador llame a los puntos finales y obtenga los datos que queremos mostrar. La solución para nosotros fue Next.js. Next.js simplifica el proceso de dividir el archivo index.html y el archivo bundle.js en varios archivos por página, proporcionando una división automática del código. Este enfoque ayuda a mejorar el estado de carga inicial de las páginas web, proporcionando una experiencia de usuario más rápida y eficiente. Aquí, por ejemplo, podemos ver algunos números que obtuvimos en nuestro libro. Para la página de inicio, teníamos una pantalla en blanco de dos segundos y ahora, con la generación de sitios estáticos que agregamos, modificamos nuestra página de inicio para utilizar este tipo de renderizado, tenemos una visualización instantánea en la aplicación web. Para la página de visualización de datos, agregamos renderizado en el lado del servidor y antes, con una aplicación de una sola página, teníamos un estado de carga de cinco segundos donde veíamos la página pero se estaba cargando los datos. Ahora, como estamos haciendo toda la implementación y obteniendo los datos en el lado del servidor, en menos de un segundo mostraremos los datos. En cuanto a la creación de una nueva página de datos, todavía está en progreso. Aún no trabajamos en eso, pero vamos a utilizar el renderizado en el lado del cliente, ya que habrá muchas interacciones entre los usuarios y la aplicación web. En conclusión, con Next.js podemos mejorar el rendimiento de nuestras aplicaciones, ya que tenemos una división automática del código y diferentes tipos de renderizado que podemos aplicar en las diferentes páginas. Pero si no utilizamos el renderizado de la manera correcta, podríamos disminuir el rendimiento de las aplicaciones. Así que debemos pensar más en cómo hacer los renderizados. Eso es todo, ¡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

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.
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.
Enrutamiento en React 18 y más allá
React Summit 2022React Summit 2022
20 min
Enrutamiento en React 18 y más allá
Top Content
Routing in React 18 brings a native app-like user experience and allows applications to transition between different environments. React Router and Next.js have different approaches to routing, with React Router using component-based routing and Next.js using file system-based routing. React server components provide the primitives to address the disadvantages of multipage applications while maintaining the same user experience. Improving navigation and routing in React involves including loading UI, pre-rendering parts of the screen, and using server components for more performant experiences. Next.js and Remix are moving towards a converging solution by combining component-based routing with file system routing.
Concurrencia en React, Explicada
React Summit 2023React Summit 2023
23 min
Concurrencia en React, Explicada
Top Content
React 18's concurrent rendering, specifically the useTransition hook, optimizes app performance by allowing non-urgent updates to be processed without freezing the UI. However, there are drawbacks such as longer processing time for non-urgent updates and increased CPU usage. The useTransition hook works similarly to throttling or bouncing, making it useful for addressing performance issues caused by multiple small components. Libraries like React Query may require the use of alternative APIs to handle urgent and non-urgent updates effectively.
El Futuro de las Herramientas de Rendimiento
JSNation 2022JSNation 2022
21 min
El Futuro de las Herramientas de Rendimiento
Top Content
Today's Talk discusses the future of performance tooling, focusing on user-centric, actionable, and contextual approaches. The introduction highlights Adi Osmani's expertise in performance tools and his passion for DevTools features. The Talk explores the integration of user flows into DevTools and Lighthouse, enabling performance measurement and optimization. It also showcases the import/export feature for user flows and the collaboration potential with Lighthouse. The Talk further delves into the use of flows with other tools like web page test and Cypress, offering cross-browser testing capabilities. The actionable aspect emphasizes the importance of metrics like Interaction to Next Paint and Total Blocking Time, as well as the improvements in Lighthouse and performance debugging tools. Lastly, the Talk emphasizes the iterative nature of performance improvement and the user-centric, actionable, and contextual future of performance tooling.
Optimización de juegos HTML5: 10 años de aprendizaje
JS GameDev Summit 2022JS GameDev Summit 2022
33 min
Optimización de juegos HTML5: 10 años de aprendizaje
Top Content
PlayCanvas is an open-source game engine used by game developers worldwide. Optimization is crucial for HTML5 games, focusing on load times and frame rate. Texture and mesh optimization can significantly reduce download sizes. GLTF and GLB formats offer smaller file sizes and faster parsing times. Compressing game resources and using efficient file formats can improve load times. Framerate optimization and resolution scaling are important for better performance. Managing draw calls and using batching techniques can optimize performance. Browser DevTools, such as Chrome and Firefox, are useful for debugging and profiling. Detecting device performance and optimizing based on specific devices can improve game performance. Apple is making progress with WebGPU implementation. HTML5 games can be shipped to the App Store using Cordova.

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 WorkshopFree
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 🤐)
AI para Desarrolladores de React
React Advanced 2024React Advanced 2024
142 min
AI para Desarrolladores de React
Featured Workshop
Eve Porcello
Eve Porcello
El conocimiento de las herramientas de AI es fundamental para preparar el futuro de las carreras de los desarrolladores de React, y la suite de herramientas de AI de Vercel es una vía de acceso accesible. En este curso, examinaremos más de cerca el Vercel AI SDK y cómo esto puede ayudar a los desarrolladores de React a construir interfaces de transmisión con JavaScript y Next.js. También incorporaremos APIs de terceros adicionales para construir y desplegar una aplicación de visualización de música.
Temas:- Creación de un Proyecto de React con Next.js- Elección de un LLM- Personalización de Interfaces de Transmisión- Construcción de Rutas- Creación y Generación de Componentes - Uso de Hooks (useChat, useCompletion, useActions, etc)
Construyendo aplicaciones web que iluminan Internet con QwikCity
JSNation 2023JSNation 2023
170 min
Construyendo aplicaciones web que iluminan Internet con QwikCity
Featured WorkshopFree
Miško Hevery
Miško Hevery
Construir aplicaciones web instantáneas a gran escala ha sido elusivo. Los sitios del mundo real necesitan seguimiento, análisis y interfaces y interacciones de usuario complejas. Siempre comenzamos con las mejores intenciones pero terminamos con un sitio menos que ideal.
QwikCity es un nuevo meta-framework que te permite construir aplicaciones a gran escala con un rendimiento de inicio constante. Veremos cómo construir una aplicación QwikCity y qué la hace única. El masterclass te mostrará cómo configurar un proyecto QwikCity. Cómo funciona el enrutamiento con el diseño. La aplicación de demostración obtendrá datos y los presentará al usuario en un formulario editable. Y finalmente, cómo se puede utilizar la autenticación. Todas las partes básicas para cualquier aplicación a gran escala.
En el camino, también veremos qué hace que Qwik sea único y cómo la capacidad de reanudación permite un rendimiento de inicio constante sin importar la complejidad de la aplicación.
Construye una aplicación WordPress sin cabeza con Next.js y WPGraphQL
React Summit 2022React Summit 2022
173 min
Construye una aplicación WordPress sin cabeza con Next.js y WPGraphQL
Top Content
WorkshopFree
Kellen Mace
Kellen Mace
En esta masterclass, aprenderás cómo construir una aplicación Next.js que utiliza Apollo Client para obtener datos de un backend de WordPress sin cabeza y usarlo para renderizar las páginas de tu aplicación. Aprenderás cuándo debes considerar una arquitectura de WordPress sin cabeza, cómo convertir un backend de WordPress en un servidor GraphQL, cómo componer consultas usando el IDE GraphiQL, cómo colocar fragmentos GraphQL con tus componentes, y más.
Next.js 13: Estrategias de Obtención de Datos
React Day Berlin 2022React Day Berlin 2022
53 min
Next.js 13: Estrategias de Obtención de Datos
Top Content
WorkshopFree
Alice De Mauro
Alice De Mauro
- Introducción- Prerrequisitos para la masterclass- Estrategias de obtención: fundamentos- Estrategias de obtención – práctica: API de obtención, caché (estática VS dinámica), revalidar, suspense (obtención de datos en paralelo)- Prueba tu construcción y sírvela en Vercel- Futuro: Componentes de servidor VS Componentes de cliente- Huevo de pascua de la masterclass (no relacionado con el tema, destacando la accesibilidad)- Conclusión
Crea un sitio web editable visualmente con Next.js utilizando React Bricks, con blog y comercio electrónico
React Summit 2023React Summit 2023
139 min
Crea un sitio web editable visualmente con Next.js utilizando React Bricks, con blog y comercio electrónico
Top Content
WorkshopFree
Matteo Frana
Matteo Frana
- React Bricks: por qué lo construimos, qué es y cómo funciona- Crea una cuenta gratuita- Crea un nuevo proyecto con Next.js y Tailwind- Explora la estructura del directorio- Anatomía de un Brick- Crea un nuevo Brick (Texto-Imagen)- Añade un título y descripción con edición visual RichText- Añade una imagen con edición visual- Añade controles de barra lateral para editar props (relleno y lado de la imagen)- Anidación de Bricks utilizando el componente Repeater- Crea un brick de galería de imágenes- Publica en Netlify o Vercel- Tipos de página y campos personalizados- Acceso a los valores meta de la página- Internacionalización- Cómo reutilizar contenido en varias páginas: Historias y incrustaciones- Cómo crear un comercio electrónico con datos de productos de una base de datos externa y páginas de aterrizaje creadas visualmente en React Bricks- Características empresariales avanzadas: permisos flexibles, estructura bloqueada, componentes visuales personalizados