BackVolver al blog

Next.js 9.1.7

Next.js 9.1.7 mejora una base sólida, perfeccionando el canal de lanzamiento 9.1 listo para empresas. Actualice para obtener bundles de JavaScript más pequeños en el cliente, salida CLI rediseñada, FCP/TTI más rápidos y más.

Next.js 9 se lanzó hace seis (6) meses, seguido por Next.js 9.1 hace tres (3) meses.

Estos dos lanzamientos agregaron características nuevas muy potentes a Next.js, sin aumentar el tamaño base del runtime del cliente.

Desde entonces, nos hemos enfocado en refinar y mejorar el framework en su conjunto: 9.1.1, 9.1.2, 9.1.3, 9.1.4, 9.1.5, 9.1.6, y 9.1.7.

¡Exploremos qué han mejorado estos lanzamientos!

Todos estos beneficios son no disruptivos y completamente compatibles con versiones anteriores. Para actualizar solo necesitas ejecutar:

Terminal
npm i next@latest react@latest react-dom@latest

3% - 8%+ menos tamaño de JavaScript en el cliente

En colaboración con el equipo de Google Chrome, todas las aplicaciones Next.js se beneficiarán de una reducción de 7.5kB o más.

Aplicaciones básicas verán una reducción de tamaño del 3-4%, ¡y aplicaciones más avanzadas pueden ver reducciones de hasta 6-8% (o más)!

9.0.x9.1.xdiferencia
Aplicación Básica68.9kB66.1kB4.1% más pequeño

Estos ahorros se deben en parte a reemplazar la versión cliente del paquete url con uno construido sobre la API URL.

Más reducción de tamaño se ha logrado proporcionando polyfills integrados y pequeños para paquetes de uso común. Puedes leer más sobre estos polyfills aquí.

Finalmente, hemos optimizado nuestra salida JSX lo que introducirá ahorros en correlación directa con la cantidad de JSX en tu aplicación.

Salida CLI de producción rediseñada

La salida del build de producción en la CLI ha sido rediseñada para mayor claridad. Como Next.js es un framework de aplicaciones híbrido, cada página puede tener características diferentes.

La nueva salida clasifica cada página como una de las siguientes:

  • Renderizado del lado del servidor (Server): la página se renderiza en el servidor en tiempo de ejecución, lo que significa que usa getInitialProps o getServerProps (propuesta)
  • Optimizado estáticamente de forma automática (Static): la página se renderizó como HTML estático en tiempo de build y se servirá como archivo estático (no usa props iniciales)
  • Generado estáticamente usando datos computados (SSG): la página se generó como HTML/JSON estático en tiempo de build y se servirá como archivos estáticos (usa getStaticProps (propuesta))

Además, la nueva salida muestra el tamaño Gzipped de cada página — estos tamaños excluyen archivos compartidos por todas las páginas (mostrados por separado).

El tamaño de cada página se coloreará de acuerdo con la experiencia de usuario percibida:

  • Menos de 130kB: Verde — tu aplicación debería ser performante en la mayoría de condiciones de red y dispositivo.
  • Entre 130kB y 170kB: Amarillo — tu aplicación se acerca a un tiempo de carga de 5-6 segundos en condiciones de red y dispositivo de línea base global.
  • Más de 170kB: Rojo — tu aplicación probablemente tardará más de 6 segundos en cargar en las mismas condiciones.

La nueva salida CLI de producción de Next.js

La nueva salida CLI de producción de Next.js

Nos encantaría escuchar tus comentarios sobre la nueva salida de build.

En un futuro próximo Next.js también tendrá presupuestos de tamaño que te ayudarán a asegurar que las páginas estén dentro de un cierto rango de tamaño.

Nuevos polyfills integrados: fetch(), URL y Object.assign

Al examinar muchas aplicaciones de usuarios y nuestros ejemplos, encontramos que la mayoría incluía un conjunto similar de polyfills. En algunos casos, las aplicaciones incluso tenían polyfills duplicados para la misma característica.

Para solucionar esto, colaboramos con el equipo de Google Chrome para integrar polyfills para las tres APIs más comunes que observamos.

Usando carga diferencial, estos polyfills no se cargan para el 83% del tráfico web global. Esto significa que la mayoría de tus usuarios no descargarán los bytes asociados con estos polyfills—solo se descargarán si son necesarios.

Además, cualquier polyfill conocido que ahora hemos integrado se eliminará completamente de tu build de producción. Esto significa que no pagarás el precio por una de tus dependencias que inadvertidamente importe un polyfill para una de estas APIs.

La lista de APIs integradas y los polyfills que hacen obsoletos son los siguientes:

Todavía necesitas importar isomorphic-fetch o isomorphic-unfetch si usas fetch() en el servidor.

Este cambio es completamente no disruptivo, y todos los polyfills están hechos con las versiones más compatibles con el estándar disponibles. El resultado es hasta 18kB de JavaScript eliminado de tus bundles de producción en navegadores modernos.

Carga de páginas optimizada: Mejor FCP y TTI

Next.js ha optimizado su implementación de precarga para reducir FCP y TTI general.

Al solucionar un error del navegador, el CSS (cuando se usa) ahora tiene prioridad correcta sobre JavaScript. Esto resulta en un First Contentful Paint más rápido, lo que significa un sitio visualmente completo mucho más rápido para tus usuarios finales.

Además, hemos optimizado nuestra precarga de páginas para usar solicitudes de red de menor prioridad.

Adicionalmente, estas solicitudes solo ocurren durante el tiempo de inactividad del navegador, resultando en un tiempo-hasta-interactivo más rápido. Esto se debe a que el navegador priorizará hacer que tu aplicación sea interactiva sobre la precarga optimista.

FCP/TTI antes y después de las optimizaciones

FCP/TTI antes y después de las optimizaciones

Soporte para las últimas características de JavaScript

Next.js tiene una canalización de compilación avanzada y altamente optimizada que te permite usar las últimas características de JavaScript. Optimizaciones recientes que hemos introducido contribuyeron directamente a la reducción del 3-8% en el tamaño de la aplicación.

Estas características de JavaScript se pueden aprovechar sin preocuparse por la compatibilidad del navegador, ya que automáticamente compilamos tu código para soportar todos los navegadores (excluyendo versiones al final de su vida útil). Esto incluye características ES6+, como async/await (ES2017), Object Rest/Spread Properties (ES2018), Dynamic import() (ES2020), ¡y más!

En este lanzamiento, nos complace anunciar soporte para Optional Chaining (Etapa 4) y Nullish Coalescing (Etapa 4).

pages/index.js
function Page(props) {
  return (
    <p>{props?.deeply?.nested?.value}</p>
    /* ⬆ Si deeply.nested.value no está disponible no se renderizará */
  );
}
 
export default Page;

Operador de encadenamiento opcional (?.)

pages/index.js
function Page(props) {
  return (
    <p>{props.something ?? 'Valor por defecto'}</p>
    /* ⬆ resulta en "Valor por defecto" */
  );
}
 
export default Page;

Operador de fusión nula (??)

En el futuro, planeamos generar bundles aún más optimizados mediante builds automáticos module / nomodule.

Soporte de despliegue sin configuración para aplicaciones next export

El comando next export de Next.js ahora funciona con la Configuración Cero de Vercel sin necesidad de configuración. Antes de este cambio, los usuarios que usaban next export necesitaban crear un now.json personalizado.

Usar el modo export de Next.js en Vercel es tan simple como tener el siguiente script build en package.json:

package.json
{
  "scripts": {
    "build": "next build && next export"
  }
}

Luego, puedes desplegar tu aplicación Next.js en Vercel con solo un comando. Si aún no has instalado Vercel, puedes hacerlo instalando Vercel CLI.

Terminal
now

Cumplimiento y opción de React Strict Mode

Todo el runtime de Next.js ahora es compatible con el Strict Mode de React. Esto incluye actualizaciones al gestor de cabeceras (<Head>), next/dynamic y otras características principales. Esto significa que los runtimes ahora usan hooks o han eliminado lifecycles obsoletos, y están usando la nueva API de Context de React.

También hemos añadido una opción conveniente para que habilites el Strict Mode en tu aplicación.

Para hacerlo, configura la siguiente opción en tu next.config.js:

next.config.js
module.exports = {
  reactStrictMode: true,
};

Si tú o tu equipo no están listos para usar Strict Mode en toda la aplicación, ¡está bien! Puedes migrar incrementalmente página por página usando <React.StrictMode>.

Aunque no es obligatorio, el Strict Mode desbloqueará muchas optimizaciones en el futuro. ¡Por eso sugerimos que lo consideres antes que después!

Pruebas automatizadas contra builds nocturnos de React

En estrecha colaboración con el Equipo Central de React, ahora estamos probando Next.js contra el canal next de React cada 12 horas.

Estas pruebas ayudan a asegurar que estemos preparados y compatibles con futuros lanzamientos de React. La compatibilidad es algo que Next.js toma muy en serio, y nos comprometemos con la estabilidad a largo plazo de la API de Next.js.

Este proceso ha sido documentado por el Equipo Central de React con la esperanza de que otros proyectos en el ecosistema React sigan su ejemplo.

Comunidad

Estamos emocionados por los próximos cambios que mejorarán el tamaño y rendimiento en todas las aplicaciones Next.js.

Además, la comunidad Next.js sigue creciendo:

  • Hemos tenido más de 865 contribuidores independientes.
  • En GitHub, el proyecto ha recibido más de 43,700 estrellas.
  • El directorio de ejemplos tiene más de 220 ejemplos.

La comunidad Next.js ahora tiene más de 13,600 miembros. ¡Únete a nosotros!

Estamos agradecidos con nuestra comunidad y todo el feedback externo y contribuciones que ayudaron a dar forma a este lanzamiento.