Введение в свои запросы в Nuxt

В основном учебнике мы загружали данные через функцию useFetch. Ей достаточно одного URL: Nuxt сам выполняет запрос, сохраняет JSON и отдаёт его вместе с HTML, чтобы браузер не повторял ту же работу после гидратации.

На практике странице часто нужно больше, чем один готовый ответ по адресу. Может понадобиться обратиться к двум разным API и собрать результат в один объект. Или взять JSON с сервера, но перед выводом оставить только нужные поля, а не всю структуру записи. В таких случаях в URL передавать нечего - нужна своя логика загрузки.

Для этого в Nuxt есть функция useAsyncData. Первый аргумент задаёт ключ, под которым результат будет храниться между сервером и клиентом. Второй аргумент - функция-обработчик: любая async-функция, которая возвращает данные для страницы. Внутри неё можно вызывать $fetch, ждать несколько обещаний через Promise.all или комбинировать шаги как удобно.

Обработчик выполняется на сервере при первом рендере так же, как запрос внутри useFetch: готовый результат попадает в ответ и передаётся в браузер. Клиент получает уже заполненные данные и не дублирует тяжёлую работу ради первого экрана. После гидратации к тем же данным можно обращаться из шаблона и из setup через поле data, как при обычной загрузке по URL.

Отличие от useFetch не в механизме доставки на клиент, а в форме задачи. useFetch заточен под один HTTP-адрес. useAsyncData оборачивает произвольную асинхронную работу, когда итог страницы собирается из нескольких шагов или из ответа, который нужно привести к удобному виду до вывода.

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