Table of Contents
Next.js, un framework Javascript de código abierto fue creado específicamente para aprovechar React para crear aplicaciones web fáciles de usar y sitios web estáticos. Fue desarrollado por Vercel y ofrece un entorno integrado que simplifica la renderización del lado del servidor.
Next.js fue lanzado el 26 de octubre de 2023, y durante la Next.js Conf, Guillermo Rauch, el CEO, habló sobre las nuevas características. Una de las características, denominada «Partial Prerendering», se introdujo en la vista previa con el objetivo de proporcionar tanto una inicial rápida como visuales dinámicos sin sacrificar la experiencia del desarrollador.
Next.js 14 aporta notables mejoras a su TurboPack, el motor responsable de la compilación eficiente, ahora es más rápido. Además, la estabilización de Server Actions y el prerendering parcial se traducen en una mejor experiencia de desarrollo y sitios web más rápidos.
Características de Next.js 14
Renderizado previo parcial y SSR
El pre-renderizado es la práctica de crear el HTML de una página web antes de que un usuario lo solicite, ya sea durante el tiempo de compilación o de despliegue. Next.js ofrece dos opciones de pre-renderizado para una velocidad óptima: Static Generation y Server-side rendering (SSR).
La generación estática trabaja con datos que ya están disponibles en el momento de la compilación, lo que mejora el rendimiento con respecto a la renderización del lado del servidor. En el renderizado del lado del servidor, la obtención de datos y el renderizado se realizan en el momento de la solicitud. Aún así, el renderizado del lado del servidor es preferible comparado con las aplicaciones de renderizado del cliente. Y si usamos Next.js, tendremos renderizado de servidor por defecto.
Otra característica importante, el pre-renderizado parcial, se anuncia para Next.js 14. El pre-renderizado parcial difiere del pre-renderizado en que crea partes de la página dinámicamente durante el tiempo de ejecución en respuesta a las interacciones del usuario. Al obtener las partes estáticas de la página como HTML y actualizar sólo las partes dinámicas cuando es necesario, se pretende ofrecer tanto cargas de página iniciales rápidas como visuales dinámicas. Si el HTML generado es estático hasta la siguiente construcción o despliegue, el pre-renderizado funciona bien para páginas con contenido estático o que cambia raramente.
El pre-renderizado parcial puede ayudar a acelerar la carga inicial de la página cuando es necesario elegir entre renderizado estático y dinámico. A pesar de ser una característica experimental y opcional, es crucial integrar el renderizado dinámico con la generación estática.Modo turbo
El objetivo principal de Next.js 14 es mejorar la velocidad y el rendimiento. Su compilador Turbopack, basado en Rust, ha sido la preocupación del equipo y han conseguido una mejora notable. Ahora el arranque del servidor local es un 53,3% más rápido y las actualizaciones de código con velocidades de actualización rápidas hasta un 94,7% más rápidas. Cabe señalar que Turbo aún no está totalmente finalizado.
Acciones del servidor
Además de proporcionar estabilidad a las Server Actions, Next.js 14 introduce mecanismos para mejorar el rendimiento de las aplicaciones web. Como se destaca en un reciente artículo de Dev.to, en lugar de crear manualmente rutas API para tareas de backend, los desarrolladores pueden ahora definir sin problemas funciones del lado del servidor directamente dentro de los componentes de React. Esta integración facilita una interacción fluida entre el cliente y el servidor, permitiendo a los desarrolladores incorporar funcionalidades esenciales como la gestión de errores, el almacenamiento en caché, la revalidación y la redirección, todo ello en el contexto del modelo App Router. Además, para aquellos que utilizan TypeScript, esta actualización garantiza una mejor seguridad de tipos entre los componentes del cliente y del servidor, lo que contribuye a una base de código más sólida y fácil de mantener.
Como se detalla en un perspicaz post en Dhiwise, en esta característica encontramos formularios y la API Web FormData, que ofrece un paradigma familiar para los desarrolladores acostumbrados a frameworks centrados en el servidor.
Optimización de imágenes y componentes de imagen
Next.js 14 introduce una función de optimización de imágenes mejorada y flexible, que agiliza el proceso de optimización de imágenes de forma automática. He aquí un breve resumen de cómo Next.js facilita la optimización de imágenes:
Priorización de la carga de imágenes
Next.js prioriza de forma inteligente la carga de imágenes. Las imágenes situadas dentro de la ventana gráfica se cargan en primer lugar, lo que acelera la carga inicial de la página, mientras que las situadas por debajo se cargan de forma asíncrona a medida que el usuario se desplaza hacia abajo.
Selección dinámica de tamaño y formato
El componente Image de Next.js selecciona dinámicamente el tamaño y el formato adecuados en función del ancho de banda del usuario y de los recursos del dispositivo. Esto garantiza que los usuarios reciban imágenes de tamaño adecuado y optimizadas.
Redimensionamiento de imágenes
Next.js simplifica la gestión de imágenes adaptativas redimensionándolas automáticamente según sea necesario. Este enfoque de diseño responsivo garantiza que las imágenes se adapten a distintos tamaños de pantalla, mejorando aún más la experiencia general del usuario.
Compatibilidad con formatos de próxima generación (WebP):
La optimización de imágenes en Next.js se extiende a la compatibilidad con formatos de imagen de última generación como WebP. Este formato, conocido por su compresión y calidad superiores, es utilizado automáticamente por el componente Image cuando procede.
Prevención de los desplazamientos acumulativos:
Para mejorar la estabilidad visual y evitar cambios en el diseño, Next.js incorpora marcadores de posición para las imágenes. Estos marcadores de posición sirven como elementos temporales hasta que las imágenes reales se cargan completamente, evitando interrupciones en el diseño.
Además, Next.js 14 mejora el rendimiento gestionando eficazmente las descargas de fuentes. El framework optimiza el proceso de descarga de fuentes como Next/font/google.
División automática del código
La división automática del código en Next.js 14 es una potente técnica que contribuye significativamente a optimizar el rendimiento de la web. Como se explica en la entrada del blog de Calibre, las importaciones dinámicas, también conocidas como división de código, desempeñan un papel fundamental en este proceso.
La división del código permite dividir los paquetes JS en trozos más pequeños y manejables. Los usuarios sólo descargan lo necesario, lo que permite un uso más eficiente del ancho de banda. Con menos JS, el rendimiento en los dispositivos más lentos experimenta una notable mejora.
Otro interesante artículo en Builder.io amplía los dos métodos de división de código en Next.js:
División basada en rutas: Por defecto, Next.js divide el JavaScript en fragmentos manejables para cada ruta. A medida que los usuarios interactúan con los distintos elementos de la interfaz de usuario, se envían los trozos de código asociados, lo que reduce la cantidad de código que debe analizarse y compilarse de una sola vez.
División basada en componentes: Los desarrolladores pueden optimizar aún más los componentes. Los componentes de gran tamaño pueden dividirse en partes separadas, lo que permite que los componentes no críticos o los que solo se renderizan en interacciones específicas de la interfaz de usuario se carguen perezosamente según sea necesario.
Estos enfoques contribuyen colectivamente a una experiencia de aplicación web más eficiente, rápida y fácil de usar, alineándose con los continuos esfuerzos para mejorar el rendimiento en Next.js 14.
Conclusión
En conclusión, Next.js 14 introduce varias características rompedoras que contribuyen en velocidad y rendimiento para las aplicaciones web. Entre las nuevas características destaca la introducción del «Partial Prerendering». El objetivo de esta innovación es ofrecer tanto una inicial rápida como visuales dinámicos sin comprometer la experiencia del desarrollador. El compilador basado en Rust aporta notables mejoras, haciendo que el arranque del servidor local sea un 53,3% más rápido y las actualizaciones de código con fast refresh hasta un 94,7% más rápidas.
Las Server Actions se han estabilizado en esta versión, presentando una integración que permite a los desarrolladores definir funciones del lado del servidor directamente dentro de los componentes React. La optimización de imágenes es otro aspecto destacado de Next.js 14, que ofrece funciones mejoradas como la carga priorizada, el tamaño dinámico y la selección de formato. La división automática del código emerge como una potente técnica para optimizar el rendimiento web al dividir los paquetes JS en trozos más pequeños y manejables. Los desarrolladores pueden aprovechar estas características para crear aplicaciones web más rápidas, eficientes y fáciles de usar, consolidando Next.js como un marco líder en el panorama del desarrollo web.
