Как в SSR происходит запрос данных для рендера страницы?

Что проверяют

Понимаете ли вы, где и когда выполняется код запроса, как данные попадают на клиент и что происходит при гидратации. Общих слов «сервер получает данные и рендерит HTML» мало, ждут конкретики на фреймворке. Следом обычно спрашивают про водопад запросов и про то, почему useEffect не участвует в SSR.

Как отвечать

Общая схема: запрос приходит на сервер, фреймворк определяет маршрут, выполняет загрузку данных, рендерит HTML с подставленными данными и сериализует их в страницу, чтобы клиент при гидратации не запрашивал их повторно.

Как это выглядит в популярных инструментах:

• Next.js App Router: серверные компоненты асинхронные, данные получают прямо в компоненте через await fetch() или обращение к базе. С Suspense страница отдаётся потоком: оболочка сразу, медленные блоки по готовности. В Next.js 15 fetch по умолчанию перестал кэшироваться, кэширование включается явно;
• Next.js Pages Router: getServerSideProps на каждый запрос, данные уходят в пропсы и в __NEXT_DATA__;
• Nuxt: useFetch и useAsyncData выполняются на сервере и передают результат в payload;
• Remix и React Router: функция loader у маршрута, вложенные маршруты грузят данные параллельно;
• TanStack Query: prefetchQuery на сервере, затем dehydrate и HydrationBoundary, клиент получает заполненный кэш.

Про нюансы: серверный fetch сам не отправляет куки пользователя, их нужно передать во внешний API из входящего запроса. Время до первого байта определяет самый медленный запрос, поэтому независимые загрузки запускают параллельно через Promise.all, а медленные уводят за Suspense. Ошибка одного API не должна ронять всю страницу.

Где спотыкаются

Кладут загрузку в useEffect и считают это SSR. Эффекты на сервере не выполняются, в HTML придёт пустой список и спиннер.

Пишут await подряд для независимых запросов. Получается водопад, и страница ждёт сумму задержек вместо максимума.

Из серверного компонента ходят по HTTP в собственный API route того же приложения. Это лишний сетевой круг и проблемы с абсолютным URL и куки, хотя функцию получения данных можно вызвать напрямую.