javascript - Next.js 13: Mejorar el tiempo de carga de la página y mostrar un spinner estable durante los cambios de ruta para una mejor experiencia de usuario

Estoy trabajando en un proyecto de Next.js 13 y enfrentando algunos problemas con tiempos de carga lentos y un spinner inestable al cambiar de página.

En mi caso, al navegar de la página de inicio a la página /example, el comportamiento es inconsistente:

A. A veces, la página cambia lentamente (aproximadamente 2-3 segundos), y el contenido de /example se muestra directamente sin mostrar el spinner, lo que resulta en una mala experiencia de usuario.

B. En otros momentos, la ruta cambia de inmediato y se muestra un indicador de carga antes del contenido /example, que es el comportamiento que quiero lograr de manera consistente.

Estoy usando Firebase para obtener datos, así que optimizar la obtención de datos no es mi enfoque en este momento. En cambio, estoy buscando cambiar de rutas inmediatamente y mostrar un spinner estable para indicar que el contenido se está cargando.

¿Cómo puedo mejorar el tiempo de carga de la página y mostrar un spinner estable para decirle al usuario "algo está llegando"?

Esto es lo que he intentado hasta ahora:

1. implementa la división de código y las importaciones dinámicas para reducir el tiempo de carga inicial.
2. crea un loading.tsx dentro de /app

Cualquier ayuda o orientación sería muy apreciada. ¡Gracias!

diseño.tsx

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en" suppressHydrationWarning>
      <head />
      <body>
        <AppLayout>
          <MainContainer>{children}</MainContainer>
        </AppLayout>
      </body>
    </html>
  );
}

MainContainer.tsx También uso un wrap de Suspense nuevamente.

const MainContainer: React.FC<MainContainerProps> = ({ children }) => {
  const color = useColorModeValue(light, dark);

  return (
    <Grid
      templateAreas={`"header""module""footer"`}
      gridTemplateRows={"min-content 1fr min-content"}
      gridTemplateColumns={"1fr"}
      minH="100vh"
      bg={color.background}
      color={color.onBackground}
      outlineColor={color.outline}
    >
      <GridItem area="header" position="sticky" top="0" zIndex={99}>
        <Header />
      </GridItem>
      <GridItem area="module" position="relative" overflow="hidden">
        <Suspense
          fallback={
            <Center minH="calc(100vh - 4rem)">
              <Spinner color={color.primary} />
            </Center>
          }
        >
          {children}
        </Suspense>
      </GridItem>
      <GridItem area="footer">
        <Footer />
      </GridItem>
    </Grid>
  );
};

Respuesta #1

Mi amigo me dijo que esto se debe a que actualmente estás trabajando en modo de desarrollo. Cuando compiles y despliegues, funcionará perfectamente rápido.

Y otro amigo mío me mostró la diferencia entre desarrollo y luego producción, realmente estaba funcionando de manera perfecta.

No puedo construir el mío ahora mismo para probarlo, pero si tú puedes, te sugiero que lo intentes.