loading.js

El archivo especial loading.js te ayuda a crear una interfaz de carga significativa con React Suspense. Con esta convención, puedes mostrar un estado de carga instantáneo desde el servidor mientras el contenido de un segmento de ruta se transmite. El nuevo contenido se intercambia automáticamente una vez completado.

export default function Loading() {
  // O un componente esqueleto de carga personalizado
  return <p>Cargando...</p>
}

export default function Loading() {
  // O un componente esqueleto de carga personalizado
  return <p>Cargando...</p>
}

Dentro del archivo loading.js, puedes añadir cualquier interfaz de carga ligera. Puede ser útil usar las Herramientas de desarrollo de React para alternar manualmente los límites de Suspense.

Por defecto, este archivo es un Componente de Servidor - pero también puede usarse como Componente de Cliente mediante la directiva "use client".

Referencia

Parámetros

Los componentes de interfaz de carga no aceptan ningún parámetro.

Comportamiento

Navegación

La interfaz de reserva (fallback) es precargada, haciendo que la navegación sea inmediata a menos que la precarga no se haya completado.
La navegación es interrumpible, lo que significa que cambiar de ruta no requiere esperar a que el contenido de la ruta se cargue completamente antes de navegar a otra ruta.
Los diseños compartidos permanecen interactivos mientras se cargan los nuevos segmentos de ruta.

Estados de carga instantáneos

Un estado de carga instantáneo es una interfaz de reserva que se muestra inmediatamente al navegar. Puedes pre-renderizar indicadores de carga como esqueletos o spinners, o una parte pequeña pero significativa de las pantallas futuras como una foto de portada, título, etc. Esto ayuda a los usuarios a entender que la aplicación está respondiendo y proporciona una mejor experiencia de usuario.

Crea un estado de carga añadiendo un archivo loading.js dentro de una carpeta.

export default function Loading() {
  // Puedes añadir cualquier interfaz dentro de Loading, incluyendo un Skeleton.
  return <LoadingSkeleton />
}

export default function Loading() {
  // Puedes añadir cualquier interfaz dentro de Loading, incluyendo un Skeleton.
  return <LoadingSkeleton />
}

En la misma carpeta, loading.js se anidará dentro de layout.js. Envolverá automáticamente el archivo page.js y cualquier hijo en un límite <Suspense>.

SEO

Next.js esperará a que la obtención de datos dentro de generateMetadata se complete antes de transmitir la interfaz al cliente. Esto garantiza que la primera parte de una respuesta transmitida incluya las etiquetas <head>.
Dado que la transmisión se renderiza en el servidor, no afecta al SEO. Puedes usar la herramienta Rich Results Test de Google para ver cómo aparece tu página para los rastreadores web de Google y ver el HTML serializado (fuente).

Códigos de estado

Al transmitir, se devolverá un código de estado 200 para indicar que la solicitud fue exitosa.

El servidor aún puede comunicar errores o problemas al cliente dentro del contenido transmitido, por ejemplo, al usar redirect o notFound. Dado que los encabezados de respuesta ya se han enviado al cliente, el código de estado de la respuesta no se puede actualizar. Esto no afecta al SEO.

Límites del navegador

Algunos navegadores almacenan en búfer una respuesta transmitida. Es posible que no veas la respuesta transmitida hasta que la respuesta supere los 1024 bytes. Esto generalmente solo afecta a aplicaciones de "hola mundo", pero no a aplicaciones reales.

Soporte de plataformas

Opción de despliegue	Compatible
Servidor Node.js	Sí
Contenedor Docker	Sí
Exportación estática	No
Adaptadores	Depende de la plataforma

Aprende cómo configurar la transmisión al autoalojar Next.js.

Ejemplos

Transmisión con Suspense

Además de loading.js, también puedes crear manualmente límites de Suspense para tus propios componentes de interfaz. El Enrutador de Aplicaciones admite la transmisión con Suspense.

<Suspense> funciona envolviendo un componente que realiza una acción asíncrona (por ejemplo, obtener datos), mostrando una interfaz de reserva (por ejemplo, esqueleto, spinner) mientras ocurre, y luego intercambiando tu componente una vez que se completa la acción.

import { Suspense } from 'react'
import { PostFeed, Weather } from './Components'

export default function Posts() {
  return (
    <section>
      <Suspense fallback={<p>Cargando feed...</p>}>
        <PostFeed />
      </Suspense>
      <Suspense fallback={<p>Cargando clima...</p>}>
        <Weather />
      </Suspense>
    </section>
  )
}

import { Suspense } from 'react'
import { PostFeed, Weather } from './Components'

export default function Posts() {
  return (
    <section>
      <Suspense fallback={<p>Cargando feed...</p>}>
        <PostFeed />
      </Suspense>
      <Suspense fallback={<p>Cargando clima...</p>}>
        <Weather />
      </Suspense>
    </section>
  )
}

Al usar Suspense, obtienes los beneficios de:

Renderizado de servidor con transmisión - Renderizado progresivo de HTML desde el servidor al cliente.
Hidratación selectiva - React prioriza qué componentes hacer interactivos primero según la interacción del usuario.

Para más ejemplos y casos de uso de Suspense, consulta la Documentación de React.

Historial de versiones

Versión	Cambios
`v13.0.0`	Se introdujo `loading`.

On this page