Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Вивчайте Оптимізація Завантажувачів за Допомогою Групування Компонентів | Отримання та Відображення Даних у Next.js
Майстерність Next.js 14 для Створення Сучасних Вебзастосунків

bookОптимізація Завантажувачів за Допомогою Групування Компонентів

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

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

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

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

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

На практиці

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

Як ми можемо покращити це?

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

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

Запитати АІ

expand

Запитати АІ

ChatGPT

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

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

bookОптимізація Завантажувачів за Допомогою Групування Компонентів

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

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

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

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

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

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

На практиці

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

Як ми можемо покращити це?

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

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