1. Введение в $fetch: основы работы с HTTP-запросами в Nuxt 3
Введение в fetch.
Исторически разработчики использовали стандартный браузерный Fetch API или сторонние библиотеки, такие как Axios. Однако в контексте изоморфных приложений (работающих и на сервере, и на клиенте) эти инструменты требуют дополнительной настройки. Nuxt 3 решает эту проблему изначально.
> Nuxt использует библиотеку ofetch для предоставления глобального хелпера fetch является надстройкой над стандартным Fetch API, но значительно упрощает рутинные операции. Разработчику больше не нужно вручную проверять статус ответа или преобразовывать данные.
Ключевые улучшения включают:
* Автоматический парсинг ответов. Если сервер возвращает JSON, fetch этот же процесс становится лаконичным:
Если API вернет список из 100 пользователей, переменная users сразу будет содержать готовый массив объектов, готовый к итерации в шаблоне.
Проблема двойного запроса при серверном рендеринге
Понимание жизненного цикла Nuxt 3 критически важно для правильной работы с данными. Nuxt является изоморфным фреймворком. Это означает, что код компонентов выполняется дважды: сначала на сервере для генерации HTML, а затем в браузере для оживления страницы (процесс гидратации).
!Схема выполнения запроса в Nuxt 3
Если вызвать fetch сработает повторно уже на стороне клиента, делая еще один запрос к API.
Такое поведение создает избыточную нагрузку на сервер и увеличивает время готовности страницы к взаимодействию. Представим интернет-магазин: если размер ответа API с каталогом товаров составляет 50 КБ, а страницу одновременно открывают 10 000 пользователей, двойной запрос создаст лишнюю нагрузку на сервер базы данных и сгенерирует дополнительные 500 МБ паразитного трафика. Если время ответа сервера составляет секунд, пользователь может заметить подвисание интерфейса при гидратации.
Разделение зон ответственности: fetch | useFetch / useAsyncData |
| :--- | :--- | :--- |
| Основное назначение | Пользовательские действия (клики, отправка форм) | Первичная загрузка данных для рендеринга компонента |
| Поведение при SSR | Выполняется и на сервере, и на клиенте (двойной запрос) | Выполняется на сервере, данные передаются клиенту (один запрос) |
| Реактивность | Возвращает сырые данные (Promise) | Возвращает реактивные объекты (data, pending, error) |
| Кеширование | Отсутствует | Встроено (по ключу URL) |
Для получения данных при загрузке страницы следует использовать useFetch, который под капотом использует тот же fetch
Несмотря на ограничения при инициализации компонентов, fetch.
javascript const fetchProducts = async (pageNumber) => { const products = await fetch поддерживает перехватчики жизненного цикла.
javascript
const localUsers = await fetch не будет делать реальный HTTP-запрос через сетевой интерфейс. Вместо этого он напрямую вызовет соответствующую функцию-обработчик из папки server/api. Это экономит миллисекунды на установке сетевого соединения и значительно снижает накладные расходы сервера.
Понимание базовых принципов работы $fetch` открывает путь к созданию производительных и надежных приложений. Умение разделять первичную загрузку данных и реакцию на действия пользователя — это фундамент, на котором строится вся архитектура работы с сетью в Nuxt 3.