Carga diferida (Lazy Loading)

La carga diferida en Next.js ayuda a mejorar el rendimiento de carga inicial de una aplicación al reducir la cantidad de JavaScript necesaria para renderizar una ruta.

Le permite diferir la carga de Componentes del Cliente y bibliotecas importadas, incluyéndolos en el paquete del cliente solo cuando son necesarios. Por ejemplo, puede diferir la carga de un modal hasta que un usuario haga clic para abrirlo.

Hay dos formas de implementar la carga diferida en Next.js:

Usando Importaciones dinámicas con next/dynamic
Usando React.lazy() con Suspense

Por defecto, los Componentes del Servidor se dividen automáticamente en código (code splitting), y puede usar streaming para enviar progresivamente partes de la interfaz de usuario desde el servidor al cliente. La carga diferida aplica a Componentes del Cliente.

`next/dynamic`

next/dynamic es una combinación de React.lazy() y Suspense. Se comporta de la misma manera en los directorios app y pages para permitir una migración incremental.

Ejemplos

Importar Componentes del Cliente

app/page.js

'use client'

import { useState } from 'react'
import dynamic from 'next/dynamic'

// Componentes del Cliente:
const ComponentA = dynamic(() => import('../components/A'))
const ComponentB = dynamic(() => import('../components/B'))
const ComponentC = dynamic(() => import('../components/C'), { ssr: false })

export default function ClientComponentExample() {
  const [showMore, setShowMore] = useState(false)

  return (
    <div>
      {/* Carga inmediata, pero en un paquete separado del cliente */}
      <ComponentA />

      {/* Carga bajo demanda, solo cuando se cumple la condición */}
      {showMore && <ComponentB />}
      <button onClick={() => setShowMore(!showMore)}>Alternar</button>

      {/* Carga solo en el lado del cliente */}
      <ComponentC />
    </div>
  )
}

Omitir SSR

Cuando se usa React.lazy() y Suspense, los Componentes del Cliente se pre-renderizarán (SSR) por defecto.

Si desea desactivar el pre-renderizado para un Componente del Cliente, puede usar la opción ssr establecida en false:

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

Importar Componentes del Servidor

Si importa dinámicamente un Componente del Servidor, solo los Componentes del Cliente que son hijos del Componente del Servidor se cargarán de forma diferida, no el Componente del Servidor en sí.

app/page.js

import dynamic from 'next/dynamic'

// Componente del Servidor:
const ServerComponent = dynamic(() => import('../components/ServerComponent'))

export default function ServerComponentExample() {
  return (
    <div>
      <ServerComponent />
    </div>
  )
}

Cargar bibliotecas externas

Las bibliotecas externas se pueden cargar bajo demanda usando la función import(). Este ejemplo usa la biblioteca externa fuse.js para búsqueda difusa. El módulo solo se carga en el cliente después de que el usuario escribe en el campo de búsqueda.

app/page.js

'use client'

import { useState } from 'react'

const names = ['Tim', 'Joe', 'Bel', 'Lee']

export default function Page() {
  const [results, setResults] = useState()

  return (
    <div>
      <input
        type="text"
        placeholder="Buscar"
        onChange={async (e) => {
          const { value } = e.currentTarget
          // Carga dinámica de fuse.js
          const Fuse = (await import('fuse.js')).default
          const fuse = new Fuse(names)

          setResults(fuse.search(value))
        }}
      />
      <pre>Resultados: {JSON.stringify(results, null, 2)}</pre>
    </div>
  )
}

Agregar un componente de carga personalizado

app/page.js

import dynamic from 'next/dynamic'

const WithCustomLoading = dynamic(
  () => import('../components/WithCustomLoading'),
  {
    loading: () => <p>Cargando...</p>,
  }
)

export default function Page() {
  return (
    <div>
      {/* El componente de carga se mostrará mientras <WithCustomLoading/> está cargando */}
      <WithCustomLoading />
    </div>
  )
}

Importar exportaciones con nombre

Para importar dinámicamente una exportación con nombre, puede devolverla desde la Promesa retornada por la función import():

components/hello.js

'use client'

export function Hello() {
  return <p>¡Hola!</p>
}

app/page.js

import dynamic from 'next/dynamic'

const ClientComponent = dynamic(() =>
  import('../components/hello').then((mod) => mod.Hello)
)

Carga diferida (Lazy Loading)

On this page