Importación dinámica de Next.js

Importaciones dinámicas: a diferencia de los módulos de importación estándar, los módulos de importación dinámica son flexibles en términos de cuándo y cómo se cargan. En lugar de verse obligado a cargar un archivo de módulo durante la lectura, se puede solicitar una poderosa importación durante el uso. Con el código que separa el módulo en un archivo por lotes separado, se puede descargar por separado, lo que reduce la carga en la primera página.

Configurar importaciones dinámicas en Next.js :

Antes de continuar, hay algunas cosas que debe tener en cuenta sobre la importación dinámica. Aunque la importación dinámica puede reducir la carga de la página, es muy importante saber cómo se comporta el proceso de descarga masiva para evitar consecuencias negativas que puedan aumentar la carga de la página.

• Las importaciones dinámicas se recuperan cuando el componente se representa por primera vez.
• Las importaciones ya procesadas no activan una recuperación adicional.
• Cada importación dinámica creará un archivo de paquete recién incrementado. Esto incluye importaciones dinámicas anidadas.
• Cada importación dinámica agrega una nueva solicitud de servidor.

Creando la aplicación React:

Paso 1: Cree una aplicación React usando el siguiente comando y muévase a esa carpeta:

npx create-next-app gfg
cd gfg 

Paso 2: cree una carpeta con nombre de componentes en su directorio raíz. Cree una carpeta llamada componentes. Ejecute el comando para crear una carpeta.

mkdir components 

Paso 3: Dentro de la carpeta crea dos archivos. Dentro de la carpeta del componente, los dos archivos javascript se denominan GFG.js y Hello.js con el siguiente código.

import React from "react";
  
function GFG() {
    return (
        <div>
            <h1>Welcome TO GeeksforGeeks</h1>
        </div>
    );
}
  
export default GFG;

import React from "react";
  
function Hello() {
    return (
        <div>
            <h1>Hello Geeks</h1>
        </div>
    );
}
  
export default Hello;

Estructura del proyecto: el directorio de su proyecto se verá así:

Directorio

Paso 4: Dentro de index.js tenemos importación dinámica. 

En su directorio, puede ver una carpeta de páginas dentro de ese archivo index.js que estará allí. importar dinámica desde ‘siguiente/dinámica’. Y haga estado y botón para mostrar esos dos componentes y el funcionamiento de la dinámica, así como los beneficios.

import dynamic from "next/dynamic";
import { useState } from "react";
import Hello from "../components/Hello";
  
export default function Home() {
    const [showComp, SetShowComp] = useState(false);
    const GFG = dynamic(() => import("../components/GFG"));
      
    return (
        <div>
            {showComp ? <GFG /> : <Hello />}
            <button onClick={() => SetShowComp(!showComp)}>
                Toggle Component
            </button>
        </div>
    );
}

Paso para ejecutar la aplicación: Ejecute la aplicación usando el siguiente comando:

npm start

Producción:

Referencias:

• Importación dinámica 
• Importaciones JS dinámicas de MDN
• División de código con importaciones dinámicas en Next.js