javascript - Next.js 13: Îmbunătățiți timpul de încărcare a paginii și afișați un indicator stabil în timpul schimbărilor de rută pentru o experiență mai bună a utilizatorului

Lucrez la un proiect Next.js 13 și întâmpin unele probleme cu timpuri de încărcare lente și un spinner instabil atunci când schimb paginile.

În cazul meu, atunci când navighez de la pagina principală la pagina /example, comportamentul este inconsistent:

A. Uneori, pagina se schimbă încet (aproximativ 2-3 secunde), iar conținutul /example este afișat direct fără a arăta spinner-ul, rezultând într-o experiență proastă pentru utilizator.

B. Alteori, traseul se schimbă imediat și este afișat un indicator de încărcare înainte de conținutul /example, care este comportamentul pe care vreau să-l obțin în mod constant.

Folosesc Firebase pentru a prelua date, așa că optimizarea preluării datelor nu este prioritatea mea în acest moment. În schimb, caut să schimb rutele imediat și să afișez un spinner stabil pentru a indica faptul că conținutul se încarcă.

Cum pot îmbunătăți timpul de încărcare al paginii și să afișez un spinner stabil pentru a spune utilizatorului „ceva este pe cale să apară”

Iată ce am încercat până acum:

1. implementează împărțirea codului și importuri dinamice pentru a reduce timpul inițial de încărcare.
2. creează un loading.tsx în interiorul /app

Orice ajutor sau îndrumare ar fi foarte apreciat. Mulțumesc!

layout.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 Eu folosesc din nou un wrap Suspense.

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>
  );
};

Răspuns #1

Prietenul meu mi-a spus că acest lucru se datorează faptului că în prezent lucrezi în modul de dezvoltare. Când construiești și implementezi, va funcționa perfect și rapid.

Și un alt prieten de-al meu mi-a arătat diferența dintre dezvoltare și producție, chiar funcționa într-un mod perfect.

Nu pot să îmi construiesc propriul acum ca să îl testez, dar dacă poți, îți sugerez să încerci.