Оптимізація Завантажувачів за Допомогою Групування Компонентів
Що стосується компонентів Card
, чи потрібно додавати завантажувач для кожної картки, або як краще обробити цей компонент.
Під час отримання даних для окремих компонентів <Card>
може виникнути потенційна проблема — завантаження кожної картки окремо може спричинити ефект спливання під час їх появи. Така раптова візуальна зміна може бути неприємною для користувачів.
Щоб уникнути цієї проблеми, розгляньте наступні кроки у файлі page.tsx
.
Повернення до проєкту
- Видалити компоненти
<Card>
; - Видалити функцію
fetchCardData()
; - Імпортувати новий обгортковий компонент під назвою
<CardWrapper />
; - Імпортувати новий компонент скелетону під назвою
<CardsSkeleton />
; - Обгорнути
<CardWrapper />
уSuspense
.
- Перейдіть до
app/ui/dashboard/cards.tsx
; - Імпортуйте
fetchCardData()
; - Викличте
fetchCardData()
всередині компонента<CardWrapper/>
; - Розкоментуйте необхідний код.
На практиці
Дякуємо за ваш відгук!
Запитати АІ
Запитати АІ
Запитайте про що завгодно або спробуйте одне із запропонованих запитань, щоб почати наш чат
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
Оптимізація Завантажувачів за Допомогою Групування Компонентів
Свайпніть щоб показати меню
Що стосується компонентів Card
, чи потрібно додавати завантажувач для кожної картки, або як краще обробити цей компонент.
Під час отримання даних для окремих компонентів <Card>
може виникнути потенційна проблема — завантаження кожної картки окремо може спричинити ефект спливання під час їх появи. Така раптова візуальна зміна може бути неприємною для користувачів.
Щоб уникнути цієї проблеми, розгляньте наступні кроки у файлі page.tsx
.
Повернення до проєкту
- Видалити компоненти
<Card>
; - Видалити функцію
fetchCardData()
; - Імпортувати новий обгортковий компонент під назвою
<CardWrapper />
; - Імпортувати новий компонент скелетону під назвою
<CardsSkeleton />
; - Обгорнути
<CardWrapper />
уSuspense
.
- Перейдіть до
app/ui/dashboard/cards.tsx
; - Імпортуйте
fetchCardData()
; - Викличте
fetchCardData()
всередині компонента<CardWrapper/>
; - Розкоментуйте необхідний код.
На практиці
Дякуємо за ваш відгук!