Importación dinámica para componentes

A continuación, centrémonos en un componente React que no es necesario en la carga inicial de la página.

Los componentes React también se pueden importar mediante importaciones dinámicas, pero en este caso lo usamos junto con next/dynamic para asegurarnos de que funcione como cualquier otro componente React.

Usaremos este método para retrasar la carga de nuestro modal con el ejemplo de código Hello World. Al hacer esto, también eliminamos dos bibliotecas de terceros adicionales de la carga inicial de la página.

Abre el archivo pages/index.js y agrega una importación para dynamic desde next/dynamic al principio del archivo:

import dynamic from 'next/dynamic';

También debemos eliminar esta línea:

import CodeSampleModal from '../components/CodeSampleModal';

Ahora podemos importarlo como un componente dinámico agregando lo siguiente al principio del archivo:

const CodeSampleModal = dynamic(() => import('../components/CodeSampleModal'), {
  ssr: false,
});

CodeSampleModal será el componente predeterminado devuelto por ../components/CodeSampleModal. Funciona como un componente React normal, y puedes pasarle props como lo harías normalmente.

Como no necesitamos este componente en el servidor, hemos usado ssr: false para desactivarlo.

A continuación, queremos diferir la carga de este componente hasta que sea requerido por el usuario. Para hacer esto, podemos envolver el componente en un condicional que verifique si el modal debe estar abierto, y si es así, se cargará.

Envuelve el componente CodeSampleModal de la siguiente manera:

{
  isModalOpen && (
    <CodeSampleModal
      isOpen={isModalOpen}
      closeModal={() => setIsModalOpen(false)}
    />
  );
}

Ahora, cuando isModalOpen se cambie a true por primera vez, se solicitará el JavaScript requerido.

Con estas optimizaciones, las métricas vitales deberían verse más saludables. Ejecutemos otro informe Lighthouse en Chrome DevTools para verificarlo.

Nos quedan estas dos sugerencias de optimización:

• Usar HTTP2: para resolver este problema, podemos implementar en un lugar que admita HTTP2 (por ejemplo, Vercel).
• Los elementos de imagen no tienen width y height explícitos: Esto es en realidad un error en Lighthouse y no afecta el rendimiento del sitio.

Lectura adicional

• Next.js: Documentación de importaciones dinámicas