Streaming, Suspense и dynamic

Streaming — это процесс отправки HTML по частям.

Suspense - Показывает fallback пока грузятся данные

1
2
3
4
5
6
7
8
9
// ✅ Данные из БД долгие<Suspense fallback={<Spinner />}>  <SlowDataComponent />  {/* async component */}</Suspense>  // ✅ Медленный API запрос<Suspense fallback={<div>Загрузка...</div>}>  <UserProfile userId={id} /></Suspense>

dynamic() - Загружает код компонента лениво

1
2
3
4
5
6
7
8
9
10
// ✅ Тяжелая библиотекаconst Editor = dynamic(() => import('@monaco-editor/react'))  // ✅ Модалка (не нужна сразу)const Modal = dynamic(() => import('./Modal'), { ssr: false })  // ✅ Тяжелый график (внизу страницы)const Chart = dynamic(() => import('./HeavyChart'), {  loading: () => <div>Загрузка графика...</div>})