Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Leer Optimizing Loaders with Component Grouping | Fetching and Displaying Data in Next.js
Next.js 14 Mastery for Building Modern Web Apps

bookOptimizing Loaders with Component Grouping

What about the Card components, should we add the laoder for each card or how to handle this component.

When fetching data for individual <Card> components, a potential issue arises - loading each card separately may cause a popping effect as they load in. This sudden visual change can be jarring for users.

To mitigate this problem, consider the following steps in the page.tsx file.

Back to the Project

  • Delete the <Card> components;
  • Delete the fetchCardData() function;
  • Import a new wrapper component called <CardWrapper />;
  • Import a new skeleton component called <CardsSkeleton />;
  • Wrap <CardWrapper /> in Suspense.
  • Navigate to app/ui/dashboard/cards.tsx;
  • Import fetchCardData();
  • Invoke fetchCardData() inside the <CardWrapper/> component;
  • Uncomment necessary code.

In Practice

Was alles duidelijk?

Hoe kunnen we het verbeteren?

Bedankt voor je feedback!

Sectie 5. Hoofdstuk 8

Vraag AI

expand

Vraag AI

ChatGPT

Vraag wat u wilt of probeer een van de voorgestelde vragen om onze chat te starten.

Awesome!

Completion rate improved to 2.08

bookOptimizing Loaders with Component Grouping

Veeg om het menu te tonen

What about the Card components, should we add the laoder for each card or how to handle this component.

When fetching data for individual <Card> components, a potential issue arises - loading each card separately may cause a popping effect as they load in. This sudden visual change can be jarring for users.

To mitigate this problem, consider the following steps in the page.tsx file.

Back to the Project

  • Delete the <Card> components;
  • Delete the fetchCardData() function;
  • Import a new wrapper component called <CardWrapper />;
  • Import a new skeleton component called <CardsSkeleton />;
  • Wrap <CardWrapper /> in Suspense.
  • Navigate to app/ui/dashboard/cards.tsx;
  • Import fetchCardData();
  • Invoke fetchCardData() inside the <CardWrapper/> component;
  • Uncomment necessary code.

In Practice

Was alles duidelijk?

Hoe kunnen we het verbeteren?

Bedankt voor je feedback!

Sectie 5. Hoofdstuk 8
some-alt