Що таке progressive рендеринг? Які підходи використовуються?

Повне пояснення

1. Що це і навіщо Progressive rendering (прогресивний рендеринг) дозволяє користувачеві бачити частину інтерфейсу ще до завершення завантаження всіх ресурсів. Це зменшує відчутну затримку і покращує UX.

2. Ключові принципи, терміни, інваріанти

   • lazy loading – відкладене завантаження компонентів або даних.
   • Suspense – механізм React, що дозволяє показувати fallback UI під час очікування.
   • Code Splitting – розбиття bundle‑у на менші частини, що завантажуються за потребою.
   • Intersection Observer – API для виявлення, коли елемент входить у viewport.

3. Як це працює (життєвий цикл, алгоритм)

   1. Компонент оголошується як React.lazy(() => import('./HeavyComponent')).
   2. У JSX обгортаємо його в <Suspense fallback={<Spinner />}>.
   3. Коли React рендерить, він створює проміс для завантаження модуля.
   4. Поки проміс не resolved, показується fallback (наприклад, спінер).
   5. Після завантаження компонент рендериться.

4. Практика і реалізація

   const Heavy = React.lazy(() => import('./Heavy'));
   function App() {
     return (
       <Suspense fallback={<div>Loading...</div>}>
         <Heavy />
       </Suspense>
     );
   }
   

   Для відкладеного рендеру списків використовуйте react-intersection-observer або власний хук, що підвантажує елементи при появі в viewport.

5. Тестування

   • Використовуйте @testing-library/react з waitFor для перевірки, що fallback відображається.
   • Для Intersection Observer можна мокати IntersectionObserver у Jest.

6. Оптимізація продуктивності

   • Code Splitting з webpack або next/dynamic.
   • Memoization (React.memo, useMemo) для компонентів, що не змінюються.
   • Пакети react-loadable або loadable-components для більш складних сценаріїв.

7. Accessibility

   • fallback UI повинен мати ARIA‑атрибути, наприклад role="status".
   • Переконайтеся, що клавіатурна навігація працює після завантаження.

8. Безпека та валідація

   • Перевіряйте, що dynamic imports не завантажують небезпечний код.
   • Використовуйте CSP для обмеження джерел скриптів.

9. Типові помилки й edge cases

   • Забудьте про React.lazy у функціональних компонентах, що не обгорнуті в <Suspense> – це викликає помилку.
   • Якщо fallback занадто великий, він може збільшити час першого рендеру.
   • Intersection Observer не підтримується в старих браузерах; треба fallback‑логіку.

10. Cheatsheet + можливі follow-up питання

• Як працює React.lazy з TypeScript?
• Які альтернативи Suspense для серверного рендерингу?
• Як обмежити кількість одночасних lazy‑завантажень?