Как в Next.js получать данные на сервере: getServerSideProps и async-компоненты в App Router?

Как в Next.js выполняется получение данных на сервере?

• Next.js — React-фреймворк, поддерживающий SSR и SSG
• Ранее для этого применяли getServerSideProps — серверную функцию, вызываемую для каждой страницы
• Функция getServerSideProps запускается на сервере при каждом запросе
• Она возвращает props компонента, после чего страница рендерится на сервере
• В App Router (Next.js 13+) используются async-функции в компонентах
• Асинхронный компонент сам выполняет обращения к API или базе данных
• Это обеспечивает серверный рендеринг без оберток и уменьшает boilerplate
• Итог: отдельные функции постепенно уступили место нативным async React-компонентам для SSR
• Подход применяется для SEO и вывода динамического контента с актуальными данными

Подробный ответ

Основной ответ

В Next.js механизм серверного получения данных изменился: в классическом Pages Router для этого применялась функция getServerSideProps. Она выполнялась на сервере при каждом запросе и подготавливала props, необходимые странице. В App Router, появившемся в Next.js 13+, предпочтение отдается асинхронным React-компонентам и Server Components, которые умеют получать данные асинхронно через fetch или другие вызовы непосредственно внутри компонента.

Ключевые моменты

• При использовании getServerSideProps в Pages Router код запускается на сервере заново для каждого запроса. Это позволяет обращаться к БД и API, а затем передавать полученный результат в props компонента, что особенно важно для динамического рендеринга.
• В App Router асинхронные компоненты получают данные непосредственно в своем коде. React Server Components исполняются на сервере, поддерживают асинхронные операции и возвращают уже сформированный JSX.
• Такой вариант устраняет отдельный слой загрузки данных, делает архитектуру проще и повышает производительность благодаря автоматическому streaming и оптимизации рендера.
• В App Router Fetch по умолчанию кешируется с использованием React Cache; при этом поведение можно настроить для ISR (Incremental Static Regeneration) через параметры next: { revalidate: N }.
• Обновленный механизм также лучше работает с Suspense: loading state можно отображать на уровне отдельных компонентов, не выполняя полную перезагрузку страницы.

Практический контекст

В проектах на Next.js 12-13 нередко используется комбинация подходов: legacy-приложения сохраняют getServerSideProps ради гибкости, тогда как новые решения на App Router переходят к async Server Components и встроенному fetch. Это уменьшает число вспомогательных функций и упрощает работу с данными. В результате улучшается developer experience, а современный реактивный UI поддерживается с минимальными задержками и без избыточного client-side JS.