Cómo acelerar tu app de Next.js con la división de código y estrategias de carga inteligentes
¿Qué aprenderás?
En esta publicación, se explican diferentes tipos de códigos la división y cómo usar las importaciones dinámicas para acelerar las apps de Next.js.
División de código basada en rutas y componentes
De forma predeterminada, Next.js divide tu JavaScript en fragmentos separados para cada ruta. Cuando los usuarios cargan tu aplicación, Next.js solo envía el código necesario para ruta inicial. Cuando los usuarios navegan por la aplicación, recuperan los fragmentos asociada con las otras rutas. La división de código basada en rutas minimiza la la cantidad de secuencias de comandos que se deben analizar y compilar a la vez, lo que da como resultado más rápidos en el tiempo de carga de las páginas.
Si bien la división de código basada en la ruta es una buena opción predeterminada, puedes optimizar proceso de carga con división de código a nivel de componente. Si tienes registros grandes componentes de tu app, te recomendamos dividirlos en fragmentos separados. De esta manera, cualquier componente grande que no sea fundamental o que solo se represente en ciertos las interacciones del usuario (como hacer clic en un botón) pueden cargarse de forma diferida.
Next.js admite import() dinámico,
que te permite importar módulos de JavaScript (incluidos los componentes de React)
de forma dinámica y cargar cada
importación como un fragmento independiente. Esto te proporciona
la división de código a nivel de componente y te permite controlar la carga de recursos para
que los usuarios solo descarguen el código que necesitan para la parte del sitio que
que están viendo. En Next.js, estos componentes se renderizan en el servidor
(SSR)
de forma predeterminada.
Importaciones dinámicas en acción
Esta publicación incluye varias versiones de una app de ejemplo que consiste en un con un solo botón. Al hacer clic en el botón, puedes ver un cachorro lindo. Como verás cada versión de la app y verás el dinamismo de las importaciones diferente de la estática importaciones y cómo trabajar con ellos.
En la primera versión de la app, el cachorro vive en components/Puppy.js. Para
el cachorro en la página, la app importa el componente Puppy en
index.js por una sentencia de importación estática:
import Puppy from "../components/Puppy";
Para ver cómo Next.js empaqueta la app, inspecciona el seguimiento de red en Herramientas para desarrolladores:
Para obtener una vista previa del sitio, presiona Ver app. Luego, presiona Pantalla completa
Presiona `Control + Mayúsculas + J` (o `Command + Option + J` en Mac) para abrir Herramientas para desarrolladores.
Haga clic en la pestaña Red.
Selecciona la casilla de verificación Inhabilitar caché.
Vuelve a cargar la página.
Cuando cargas la página, todo el código necesario, incluido el Puppy.js
se incluye en index.js:
Cuando presionas el botón Haz clic aquí, solo se muestra la solicitud del archivo JPEG para cachorros. agregado a la pestaña Red:
La desventaja de este enfoque es que incluso si los usuarios no hacen clic en el botón
el cachorro, tiene que cargar el componente Puppy porque está incluido en
index.js En este pequeño ejemplo, no es un gran problema, pero en el mundo real
las aplicaciones, cargar componentes grandes solo cuando
necesario.
Ahora, observa una segunda versión de la app, en la que la importación estática se
reemplazarse por una importación dinámica. Next.js incluye next/dynamic, por lo que
posible usar las importaciones dinámicas para cualquier componente en Next:
import Puppy from "../components/Puppy";
import dynamic from "next/dynamic";
// ...
const Puppy = dynamic(import("../components/Puppy"));
Sigue los pasos del primer ejemplo para inspeccionar el registro de red.
Cuando cargas la app por primera vez, solo se descarga index.js. Esta vez es
0.5 KB más pequeño (bajó de 37.9 KB a 37.4 KB) porque
no incluye el código para el componente Puppy:
El componente Puppy ahora está en un fragmento separado, 1.js, que solo se carga.
cuando presiones el botón:
En las aplicaciones del mundo real, los componentes suelen ser mucho más grandes y cargarlos de forma diferida puede recortar cientos de kilobytes de tu carga útil inicial de JavaScript.
Importaciones dinámicas con indicador de carga personalizado
Cuando se usan recursos de carga diferida, se recomienda proporcionar un indicador de carga
en caso de que haya demoras. En Next.js, puedes hacerlo proporcionando un
argumento adicional a la función dynamic():
const Puppy = dynamic(() => import("../components/Puppy"), {
loading: () => <p>Loading...</p>
});
Para ver el indicador de carga en acción, simula una conexión de red lenta en Herramientas para desarrolladores:
Para obtener una vista previa del sitio, presiona Ver app. Luego, presiona Pantalla completa
Presiona `Control + Mayúsculas + J` (o `Command + Option + J` en Mac) para abrir Herramientas para desarrolladores.
Haga clic en la pestaña Red.
Selecciona la casilla de verificación Inhabilitar caché.
En la lista desplegable Regulación, selecciona 3G rápida.
Presiona el botón Haz clic.
Ahora, cuando hagas clic en el botón, el componente y la app tardarán un poco en cargarse muestra el mensaje "Cargando..." mientras tanto.
Importaciones dinámicas sin SSR
Si necesitas renderizar un componente solo del lado del cliente (por ejemplo, una
) puedes hacerlo configurando la opción ssr en false:
const Puppy = dynamic(() => import("../components/Puppy"), {
ssr: false,
});
Conclusión
Gracias a la compatibilidad con importaciones dinámicas, Next.js ofrece código a nivel de componentes la división, lo que puede minimizar las cargas útiles de JavaScript y mejorar el tiempo de carga de los datos. Todos los componentes se renderizan del servidor de forma predeterminada. inhabilitar esta opción cuando sea necesario.