Данные в NextJS

В учебнике вы уже собирали страницы, которые показывают списки и карточки. Часто данные для таких страниц лежали прямо в коде - в массиве или в отдельном файле, который импортировали в компонент. Так удобно учиться: все под рукой, ничего не нужно настраивать снаружи проекта.

На настоящем сайте так бывает редко. Каталог товаров, новости, профиль пользователя обычно хранятся не в репозитории фронтенда, а на сервере компании или у стороннего сервиса. Страница должна получить их по сети - чаще всего по протоколу HTTP, запросом к готовому адресу API.

В App Router страница по умолчанию - это серверный компонент. Он выполняется на сервере Node.js в момент подготовки ответа для браузера. Именно там удобно обращаться к внешнему API: секреты не попадают в клиентский бандл, а сам запрос не зависит от того, включен ли у пользователя JavaScript в браузере.

Схема простая: компонент страницы обращается к чужому адресу, получает ответ, превращает его в объекты JavaScript и строит разметку - списки, таблицы, заголовки. Пользователь видит уже готовый HTML с актуальными данными, а не пустой каркас, который потом догружается на клиенте.