Вивчайте Оптимізація Завантажувачів за Допомогою Групування Компонентів | Отримання та Відображення Даних у Next.js

Що стосується компонентів Card, чи потрібно додавати завантажувач для кожної картки, або як краще обробити цей компонент.

Під час отримання даних для окремих компонентів <Card> може виникнути потенційна проблема — завантаження кожної картки окремо може спричинити ефект спливання під час їх появи. Така раптова візуальна зміна може бути неприємною для користувачів.

Щоб уникнути цієї проблеми, розгляньте наступні кроки у файлі page.tsx.

Повернення до проєкту

Видалити компоненти <Card>;
Видалити функцію fetchCardData();
Імпортувати новий обгортковий компонент під назвою <CardWrapper />;
Імпортувати новий компонент скелетону під назвою <CardsSkeleton />;
Обгорнути <CardWrapper /> у Suspense.

Перейдіть до app/ui/dashboard/cards.tsx;
Імпортуйте fetchCardData();
Викличте fetchCardData() всередині компонента <CardWrapper/>;
Розкоментуйте необхідний код.

На практиці

Все було зрозуміло?

Дякуємо за ваш відгук!

Секція 5. Розділ 8

Запитати АІ

Запитайте про що завгодно або спробуйте одне із запропонованих запитань, щоб почати наш чат

Suggested prompts:

Can you explain why grouping the cards into a wrapper helps with the loading experience?

How does the Suspense component work with CardWrapper and CardsSkeleton?

What changes were made to the CardWrapper component to fetch and display the data?

Awesome!

Completion rate improved to 2.08

Свайпніть щоб показати меню