Розуміння Лоадерів
Раніше ми розглядали, як зробити застосунок динамічним. Однак обробка великої кількості даних може призвести до повільного отримання даних, що негативно впливає на продуктивність застосунку.
Тепер розглянемо стратегії покращення користувацького досвіду при роботі з повільними запитами до даних.
Теорія
Можна використовувати широко застосовувану техніку під назвою стрімінг.
Стрімінг — це спосіб надсилання інформації невеликими частинами замість усієї одразу. Уявіть це як поділ довгої подорожі на менші етапи та проходження кожного етапу лише тоді, коли ви готові. Це допомагає уникнути затримок і дозволяє переглядати та використовувати частини вебсторінки без очікування повного завантаження.
У Next.js існує два способи реалізації стрімінгу:
- Для всієї вебсторінки використовується файл
loading.tsx; - Для окремих частин вебсторінки використовується компонент
<Suspense>.
Розглянемо детальніше, як це працює.
Стрімінг усієї сторінки
Створіть файл loading.tsx у папці dashboard, щоб додати лоадер для всієї сторінки дашборду.
loading.tsx: це спеціальний файл у Next.js, який використовуєSuspense. Він дозволяє створити тимчасовий інтерфейс (fallback UI), що відображається під час завантаження основного контенту сторінки;- Оскільки
<Sidebar>є статичним (не змінюється), він з'являється одразу. Користувачі можуть взаємодіяти з ним навіть під час завантаження динамічного контенту.
Чудова робота! Ви щойно використали стрімінг.
Виправлення помилки
Поточна проблема полягає в тому, що лоадер, який використовується у файлі loading.tsx, застосовується до всіх сторінок у папці dashboard. Але що робити, якщо нам потрібні окремі елементи інтерфейсу для кожної сторінки застосунку?
Щоб вирішити цю помилку, можна використати Route Groups. Створіть папку (overview) у директорії dashboard та перемістіть туди файли loading.tsx і page.tsx.
Завдяки цьому файл loading.tsx застосовуватиметься лише до сторінки дашборду, що вирішить проблему.
Групи маршрутів допомагають акуратно організовувати файли без зміни веб-адреси. Коли ми створюємо папку з дужками (), назва папки не буде частиною веб-адреси. Наприклад, /dashboard/(overview)/page.tsx стає просто /dashboard.
Дякуємо за ваш відгук!
Запитати АІ
Запитати АІ
Запитайте про що завгодно або спробуйте одне із запропонованих запитань, щоб почати наш чат
Can you explain more about how Suspense works for specific parts of a page?
What are some best practices for using loading.tsx in Next.js?
How do I move files into a route group and what should I watch out for?
Awesome!
Completion rate improved to 2.08Розуміння Лоадерів
Свайпніть щоб показати меню
Раніше ми розглядали, як зробити застосунок динамічним. Однак обробка великої кількості даних може призвести до повільного отримання даних, що негативно впливає на продуктивність застосунку.
Тепер розглянемо стратегії покращення користувацького досвіду при роботі з повільними запитами до даних.
Теорія
Можна використовувати широко застосовувану техніку під назвою стрімінг.
Стрімінг — це спосіб надсилання інформації невеликими частинами замість усієї одразу. Уявіть це як поділ довгої подорожі на менші етапи та проходження кожного етапу лише тоді, коли ви готові. Це допомагає уникнути затримок і дозволяє переглядати та використовувати частини вебсторінки без очікування повного завантаження.
У Next.js існує два способи реалізації стрімінгу:
- Для всієї вебсторінки використовується файл
loading.tsx; - Для окремих частин вебсторінки використовується компонент
<Suspense>.
Розглянемо детальніше, як це працює.
Стрімінг усієї сторінки
Створіть файл loading.tsx у папці dashboard, щоб додати лоадер для всієї сторінки дашборду.
loading.tsx: це спеціальний файл у Next.js, який використовуєSuspense. Він дозволяє створити тимчасовий інтерфейс (fallback UI), що відображається під час завантаження основного контенту сторінки;- Оскільки
<Sidebar>є статичним (не змінюється), він з'являється одразу. Користувачі можуть взаємодіяти з ним навіть під час завантаження динамічного контенту.
Чудова робота! Ви щойно використали стрімінг.
Виправлення помилки
Поточна проблема полягає в тому, що лоадер, який використовується у файлі loading.tsx, застосовується до всіх сторінок у папці dashboard. Але що робити, якщо нам потрібні окремі елементи інтерфейсу для кожної сторінки застосунку?
Щоб вирішити цю помилку, можна використати Route Groups. Створіть папку (overview) у директорії dashboard та перемістіть туди файли loading.tsx і page.tsx.
Завдяки цьому файл loading.tsx застосовуватиметься лише до сторінки дашборду, що вирішить проблему.
Групи маршрутів допомагають акуратно організовувати файли без зміни веб-адреси. Коли ми створюємо папку з дужками (), назва папки не буде частиною веб-адреси. Наприклад, /dashboard/(overview)/page.tsx стає просто /dashboard.
Дякуємо за ваш відгук!
