Optimización del rendimiento de la compilación/aplicación de NextJs.

A medida que una aplicación web moderna crece y se vuelve más compleja, resulta extremadamente difícil gestionar el rendimiento de estas aplicaciones web. Los marcos web populares como Nextjs brindan soporte integrado para optimizar el rendimiento de las aplicaciones, pero también tienen algunas mejoras que podemos optimizar para usted. En este blog/artículo veremos diferentes enfoques para optimizar el rendimiento de su aplicación Next.js. Estos temas los cubriremos en este blog: Versión estable de NextJs Importaciones dinámicas Optimización multizona Almacenamiento en caché de imágenes ISR (regeneración estática incremental) Compatibilidad con Lighthouse LCP (Largest Contentful Paint) Herramientas de virtualización Funciones sin servidor Regeneraciones de sitios estáticos Versión estable de Nextjs Uso de la última versión estable de Nextjs , Nextjs proporciona soporte integrado para herramientas de optimización del rendimiento, como optimización estática automática, división de código, optimización de imágenes, optimización de fuentes y precarga, así como optimización de scripts de terceros. Estas funciones tendrán soporte integrado en el próximo js; el uso de la última versión estable ayuda a mejorar el rendimiento de la aplicación. A partir de ahora, la última versión estable actual de nextjs 14.2.2. Importaciones dinámicas Las importaciones dinámicas, también conocidas como división de código, se refieren a dividir una gran porción de código en porciones más pequeñas como un módulo de JavaScript. Este método le permite posponer la carga del componente del cliente. y cargar el componente del cliente y la biblioteca solo cuando sean necesarios. Los beneficios de utilizar importaciones dinámicas son los siguientes: 1. Tiempo de interacción con el sitio mejorado.2. Tasas de rebote bajas.3. Mejores tasas de conversión del sitio.4. Tiempo de carga de página más rápido. Multizona El método Multizona es una técnica en la que puede utilizar varias aplicaciones en una única URL de aplicación. En un nivel alto, le permite crear múltiples zonas para definir diferentes partes de su aplicación como «zonas» independientes, cada una con su propio conjunto de opciones de configuración. El usuario puede definir múltiples zonas de sus aplicaciones y fusionarlas en una sola aplicación utilizando el método de reescritura. Optimización de imágenes En nextjs podemos usar el componente de imagen next/image, que es el componente incorporado de NextJs. Optimice la imagen automáticamente, con carga diferida, compresión y escalado según el tamaño del dispositivo; también puede establecer la prioridad de qué imagen se cargará primero. Es el componente esencial cuando usamos imágenes en la aplicación nextjs. Almacenamiento en caché El almacenamiento en caché ayuda a optimizar el rendimiento de su aplicación, utilizando el método de almacenamiento en caché /hook como los ganchos useCallBack() y useMemo(), estos ganchos almacenan en caché la costosa llamada a función y también pueden almacenar en caché el valor calculado, el caché es el mejor enfoque para aquellos costosos. propósito de optimización, pero el almacenamiento en caché no deseado o inconsciente también puede ralentizar el rendimiento de la aplicación. Nextjs también admite el almacenamiento en caché. nextjs almacena en caché el valor de retorno recuperado en el momento de la compilación y no recupera los datos nuevamente, reutilizando el mismo valor nuevamente. ISR (Regeneración estática incremental) ISR (Regeneración estática incremental) nos permite utilizar la generación estática por página, sin la necesidad de reconstruir todo el sitio. Ayuda a actualizar y crear contenido en el sitio sin la necesidad de volver a implementarlo. Algunos de los principales beneficios de ISR son los siguientes: 1. Mejor rendimiento2. Carga de backend reducida:3. Faster Builds Soporte para Lighthouse Lighthouse es una herramienta/extensión gratuita para Chrome de Google. lo que ayuda a controlar el rendimiento de la aplicación web. Calcule el rendimiento de la aplicación en múltiples aspectos, como SEO, rendimiento, accesibilidad y mucho más. Es una gran herramienta cuando se trata de probar el rendimiento de aplicaciones web. LCP (Largest Contentful Paint) LCP (Largest Contentful Paint), una de las tres métricas de Core Web Vitals, define el tiempo que tarda el navegador en cargar la página y mostrar el elemento de contenido más grande en la pantalla. Son los aspectos importantes de la optimización del rendimiento. La puntuación LCP de su aplicación define la calidad del rendimiento de su aplicación web. 0-2,5 es buena. Herramientas de virtualización En una aplicación web, es normal ver una larga lista de datos en la página web, cuando el tamaño de los datos aumenta como más de 1000 datos, ralentiza el desplazamiento y en algunos casos incluso congela la página o pantalla, lo cual es No es una buena práctica explicar por qué el uso de métodos como virtualizado por ventana para manejar grandes colecciones de datos, bibliotecas como virtualizado por reacción ayudan a lograr la virtualización en la aplicación web. Las funciones sin servidor se han convertido en el enfoque popular en el panorama del desarrollo web moderno. Se define como función como servicio (FaaS) y ejecuta solo el fragmento de código específico en función del evento desencadenado. A diferencia de las aplicaciones tradicionales basadas en servidor, no requiere instancias de servidor persistentes para manejar las solicitudes entrantes, sino que se ejecuta bajo demanda y se expande según los requisitos. Regeneración de sitios estáticos La regeneración de sitios estáticos es el aspecto importante de la aplicación nextjs. En la regeneración de sitios estáticos, las páginas se muestran nuevamente en el momento de la compilación, lo que significa que la creación de la página ya se ha completado en el lado del servidor, antes de que el usuario inicie el sitio o acceda a él. Cuando el usuario intenta acceder a la página, obtiene la página pregenerada que seguramente se cargará más rápido que SSG. Métodos como getStaticProps() y getStaticPaths() son un método importante para lograr SSR en aplicaciones web nextjs. Gracias por leer, si te gusta este blog, mira también mis otros blogs. Cómo renderizar una gran lista de datos en NextJS

About Francisco

Check Also

Libro electrónico: Una guía práctica para construir una estrategia de datos e IA

Libro electrónico: Una guía práctica para crear una estrategia de datos e inteligencia artificial | …

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *