Где происходит data fetching — и почему это решает LCP

Один блог загружается за 400ms, другой — за 2100ms. Одинаковый CDN, одинаковая база данных, одинаковая версия React. Единственное отличие: где происходит запрос данных.

Critical path от клика до контента

Каждая загрузка страницы имеет critical path — цепочку последовательных round-trip’ов между браузером и сервером, которые должны завершиться до того, как основной контент станет виден. Largest Contentful Paint (LCP) измеряет, когда этот контент появляется. Каждый лишний round-trip добавляет 50–200ms на быстром соединении, 500ms+ на мобильном.

С чистым SPA цепочка выглядит так:

1. Браузер запрашивает index.html с CDN (~50ms)
2. Скачивается и парсится JS bundle (~400–600ms)
3. React монтирует дерево компонентов
4. useEffect запускает fetch на /api/data (~200ms)
5. React перерисовывается с данными, LCP срабатывает

Итого: легко 800–2000ms на быстром соединении, 3–5s на медленном.

Четыре локации

Современные фреймворки поддерживают четыре места для fetch’а:

Время сборки (SSG — static generation). Данные запекаются в HTML при сборке. Нулевая стоимость fetch’а на запрос. Данные устаревают до следующей сборки. Подходит для контента, который меняется реже раза в час: посты блога, маркетинговые страницы, документация.

Сервер во время запроса (SSR или Server Components). Fetch происходит на сервере при генерации HTML-ответа. Браузер получает HTML с данными внутри. Один эффективный round-trip. Next.js RSC async components, Remix loaders и getServerSideProps — все используют этот паттерн.

Стриминг на сервере. Сервер отправляет HTML чанками до того, как все данные готовы. Шелл лэйаута прилетает за ~100ms; медленные секции стримятся по мере готовности данных. Каждый React Suspense boundary стримится независимо.

Клиент после монтирования (CSR). useEffect, useQuery, useSWR. Страница монтируется пустой; данные приходят после выполнения JS. Необходим для пользовательских интерактивных потоков — фильтры, real-time обновления, всё что зависит от состояния пользователя. Но неверный выбор для LCP-элемента.

Метафора ресторана

Client fetch — это как прийти в ресторан к пустому столу, две минуты изучать меню, потом ждать еду. Server fetch — это позвонить заранее: хост принимает заказ, вы садитесь к уже накрытому столу. Стриминг — это когда закуска приносится мгновенно, пока основное блюдо ещё готовится. Общее время кухни похоже, но воспринимаемое ожидание радикально короче.