{"type":"doc","content":[{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"🧠 1. Что делает "},{"type":"text","marks":[{"type":"code"}],"text":"Suspense"},{"type":"text","text":" при загрузке данных"}]},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"Suspense"},{"type":"text","text":" позволяет React "},{"type":"text","marks":[{"type":"bold"}],"text":"приостанавливать рендеринг"},{"type":"text","text":" части дерева,"},{"type":"hardBreak"},{"type":"text","text":"пока компонент "},{"type":"text","marks":[{"type":"bold"}],"text":"не получит нужные данные"},{"type":"text","text":","},{"type":"hardBreak"},{"type":"text","text":"и показывать "},{"type":"text","marks":[{"type":"bold"}],"text":"fallback-UI"},{"type":"text","text":" (например, спиннер или скелетон)."}]}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"То есть теперь React может «ждать» не только "},{"type":"text","marks":[{"type":"code"}],"text":"lazy()"},{"type":"text","text":"-компоненты,"},{"type":"hardBreak"},{"type":"text","text":"но и "},{"type":"text","marks":[{"type":"bold"}],"text":"Promise из запроса данных"},{"type":"text","text":"."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"⚙️ 2. Что изменилось в React 18"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"До React 18:"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"Suspense"},{"type":"text","text":" умел ждать "},{"type":"text","marks":[{"type":"bold"}],"text":"только лениво загружаемые компоненты"},{"type":"text","text":" ("},{"type":"text","marks":[{"type":"code"}],"text":"React.lazy"},{"type":"text","text":");"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"для данных приходилось вручную показывать "},{"type":"text","marks":[{"type":"code"}],"text":"Loading"},{"type":"text","text":", проверять "},{"type":"text","marks":[{"type":"code"}],"text":"isLoading"},{"type":"text","text":", обрабатывать ошибки и т.д."}]}]}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"С "},{"type":"text","marks":[{"type":"bold"}],"text":"React 18+"},{"type":"text","text":":"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"Suspense"},{"type":"text","text":" теперь может ждать "},{"type":"text","marks":[{"type":"bold"}],"text":"Promise"},{"type":"text","text":" из любого источника (fetch, async-функции и т.д.);"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"React понимает, что компонент “ещё не готов”, и "},{"type":"text","marks":[{"type":"bold"}],"text":"приостанавливает"},{"type":"text","text":" его рендер,"},{"type":"hardBreak"},{"type":"text","text":"показывая "},{"type":"text","marks":[{"type":"code"}],"text":"fallback"},{"type":"text","text":";"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"когда Promise завершён → React "},{"type":"text","marks":[{"type":"bold"}],"text":"возобновляет рендер"},{"type":"text","text":" с реальными данными."}]}]}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"🧩 3. Пример “ручной” реализации через Promise"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Чтобы понять механику, посмотрим на “низкоуровневый” пример без Next.js:"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"// utils/fetchData.js\nexport function fetchData(url) {\n let status = 'pending';\n let result;\n const suspender = fetch(url)\n .then(res => res.json())\n .then(data => {\n status = 'success';\n result = data;\n })\n .catch(err => {\n status = 'error';\n result = err;\n });\n\n return {\n read() {\n if (status === 'pending') throw suspender;\n if (status === 'error') throw result;\n return result;\n },\n };\n}\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Теперь используем его в компоненте:"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"const resource = fetchData('/api/user');\n\nfunction Profile() {\n const user = resource.read(); // ⚠️ бросает Promise, если данные ещё не готовы\n return

{user.name}

;\n}\n\nfunction App() {\n return (\n Загрузка профиля...}>\n \n \n );\n}\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"🔹 Что происходит:"}]},{"type":"orderedList","attrs":{"start":1,"type":null},"content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"resource.read()"},{"type":"text","text":" бросает Promise → React “замораживает” рендер компонента "},{"type":"text","marks":[{"type":"code"}],"text":"Profile"},{"type":"text","text":";"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"React показывает "},{"type":"text","marks":[{"type":"code"}],"text":"fallback"},{"type":"text","text":" из "},{"type":"text","marks":[{"type":"code"}],"text":"Suspense"},{"type":"text","text":";"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Когда Promise завершается → React “возобновляет” рендер и вставляет "},{"type":"text","marks":[{"type":"code"}],"text":"Profile"},{"type":"text","text":" с данными."}]}]}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"⚙️ 4. Data Fetching в React Server Components (Next.js 13+)"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"В "},{"type":"text","marks":[{"type":"bold"}],"text":"React 18+"},{"type":"text","text":" и "},{"type":"text","marks":[{"type":"bold"}],"text":"Next.js 13/14"},{"type":"text","text":" Suspense интегрирован глубоко в серверный рендеринг."}]},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"Пример:"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"// app/page.js (Next.js 13+)\nimport { Suspense } from 'react';\nimport UserInfo from './UserInfo';\nimport UserPosts from './UserPosts';\n\nexport default async function Page() {\n const user = await getUser(); // async серверный компонент\n\n return (\n <>\n

{user.name}

\n\n Загрузка постов...}>\n {/* UserPosts загружается независимо */}\n \n \n \n );\n}\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"🔹 Здесь React:"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"отдаёт первую часть HTML (имя пользователя) сразу;"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"“приостанавливает” рендеринг "},{"type":"text","marks":[{"type":"code"}],"text":"UserPosts"},{"type":"text","text":", пока не получит данные;"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"позже "},{"type":"text","marks":[{"type":"bold"}],"text":"достримливает"},{"type":"text","text":" HTML для "},{"type":"text","marks":[{"type":"code"}],"text":"UserPosts"},{"type":"text","text":" (Streaming SSR);"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"всё происходит без перезагрузки страницы."}]}]}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"📘 Это работает благодаря новым API:"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"renderToPipeableStream()"},{"type":"text","text":" — Node.js streaming SSR;"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"renderToReadableStream()"},{"type":"text","text":" — для Deno, Edge и т.д."}]}]}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"⚡ 5. Комбинация Suspense + React Query / SWR"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Пока React не имеет “встроенного” fetch-механизма,"},{"type":"hardBreak"},{"type":"text","text":"но популярные библиотеки уже добавили поддержку Suspense:"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"import { useQuery } from '@tanstack/react-query';\nimport { Suspense } from 'react';\n\nfunction Todos() {\n const { data: todos } = useQuery({\n queryKey: ['todos'],\n queryFn: () => fetch('/api/todos').then(res => res.json()),\n suspense: true, // 👈 ключевая опция\n });\n\n return

{t.title}

;\n}\n\nexport default function App() {\n return (\n Загрузка задач...}>\n \n \n );\n}\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"🔹 "},{"type":"text","marks":[{"type":"code"}],"text":"useQuery({ suspense: true })"},{"type":"text","text":" сообщает React, что во время загрузки нужно "},{"type":"text","marks":[{"type":"bold"}],"text":"бросать Promise"},{"type":"text","text":","},{"type":"hardBreak"},{"type":"text","text":"и Suspense автоматически отобразит "},{"type":"text","marks":[{"type":"code"}],"text":"fallback"},{"type":"text","text":"."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"🔀 6. Как Suspense работает внутри"}]},{"type":"orderedList","attrs":{"start":1,"type":null},"content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Компонент вызывает async-код (или хук), который выбрасывает "},{"type":"text","marks":[{"type":"code"}],"text":"Promise"},{"type":"text","text":";"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"React “встречает” этот "},{"type":"text","marks":[{"type":"code"}],"text":"Promise"},{"type":"text","text":";"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"React:"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"откладывает рендер этой ветки;"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"показывает "},{"type":"text","marks":[{"type":"code"}],"text":"fallback"},{"type":"text","text":" из ближайшего "},{"type":"text","marks":[{"type":"code"}],"text":""},{"type":"text","text":";"}]}]}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Когда Promise завершается — React "},{"type":"text","marks":[{"type":"bold"}],"text":"возобновляет"},{"type":"text","text":" рендер;"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"При SSR — React может даже “достримить” готовый HTML на клиент."}]}]}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"⚠️ 7. Что "},{"type":"text","marks":[{"type":"code"}],"text":"Suspense"},{"type":"text","text":" не делает сам"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Не выполняет "},{"type":"text","marks":[{"type":"code"}],"text":"fetch()"},{"type":"text","text":" напрямую — это делает ваш код или библиотека."}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Не обрабатывает ошибки ("},{"type":"text","marks":[{"type":"code"}],"text":"catch"},{"type":"text","text":") — для этого нужен "},{"type":"text","marks":[{"type":"code"}],"text":""},{"type":"text","text":"."}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Не заменяет "},{"type":"text","marks":[{"type":"code"}],"text":"useEffect"},{"type":"text","text":" — Suspense работает "},{"type":"text","marks":[{"type":"bold"}],"text":"во время рендера"},{"type":"text","text":", а не "},{"type":"text","marks":[{"type":"bold"}],"text":"после"},{"type":"text","text":"."}]}]}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"🧭 Итог"}]},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Suspense в React 18"},{"type":"text","text":" позволяет React "},{"type":"text","marks":[{"type":"bold"}],"text":"ждать данные так же, как он ждёт компоненты"},{"type":"text","text":"."},{"type":"hardBreak"},{"type":"text","text":"Он превращает асинхронность в "},{"type":"text","marks":[{"type":"bold"}],"text":"декларативную конструкцию"},{"type":"text","text":":"},{"type":"hardBreak"},{"type":"text","text":"React “приостанавливает” часть UI и “возобновляет” её, когда всё готово —"},{"type":"hardBreak"},{"type":"text","text":"без ручного "},{"type":"text","marks":[{"type":"code"}],"text":"isLoading"},{"type":"text","text":", "},{"type":"text","marks":[{"type":"code"}],"text":"if (!data)"},{"type":"text","text":" и т.п."}]}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"💬 Коротко:"}]},{"type":"table","content":[{"type":"tableRow","content":[{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Возможность"}]}]},{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"До React 18"}]}]},{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"React 18+"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Ожидание async компонентов"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"❌"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"✅"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"SSR + Streaming Suspense"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"❌"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"✅"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Интеграция с React Query / SWR"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"❌"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"✅"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Data Fetching в Server Components"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"❌"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"✅"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Fallback-UI без ручного "},{"type":"text","marks":[{"type":"code"}],"text":"isLoading"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"❌"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"✅"}]}]}]}]},{"type":"paragraph","attrs":{"textAlign":null}}]}

Suspense и Data fetching

Комментарии