Что такое серверные запросы в Next.js и как они выполняются?

Question

Серверные запросы в Next.js — это запросы к API или базе данных, которые выполняются на сервере до отправки HTML клиенту. Они используются, чтобы сразу вернуть пользователю готовую страницу с данными. Такие запросы недоступны из браузера и могут безопасно использовать секреты. В app router серверные запросы обычно выполняются прямо в серверных компонентах. Это улучшает SEO и снижает количество клиентского JavaScript.

YeaHub · Accepted Answer

В Next.js запросы могут выполняться на разных этапах жизненного цикла страницы, и серверные запросы — ключевой механизм для SSR, SSG и ISR.ОпределениеОпределение: серверный запрос — это запрос за данными, который выполняется в Node.js-среде (или edge), а не в браузере пользователя.Где выполняются серверные запросыSSRНа каждый HTTP-запрос пользователяSSGВо время билдаISRПо таймеру или при ревалидацииServer Components (app router)При рендере компонента на сервереПример серверного запроса в app routerconst products = await fetch("https://api.example.com/products", {
  cache: "no-store" // отключает кеширование
}).then(r => r.json());
Отличия от клиентских запросовСерверныеНет доступа из DevTools браузераМожно использовать API-ключиДанные попадают сразу в HTMLКлиентскиеВыполняются после загрузки страницыВидны в сети браузераЧасто ухудшают SEO при неправильном использованииПрактические сценарииКаталоги, статьи, лендинги → серверные запросыФильтры, интерактив, пользовательские действия → клиентские запросыВыводСерверные запросы в Next.js применяются для безопасной и SEO-дружественной загрузки данных и являются базовым инструментом серверного рендеринга.