Nuxt: useAsyncData и SSR
Для данных страницы используйте SSR-aware composable с устойчивым ключом.
Проверено Изменено
Плохо
// setup: запрос повторяется при гидратации
const products = await $fetch("/api/products");
Хорошо
const { data: products, status, error } =
await useAsyncData("products", () => $fetch("/api/products"));
Почему это важно
useAsyncData передаёт серверный результат клиенту и согласует состояния запроса.
Когда применять
Nuxt 4. Ключ должен учитывать параметры выдачи; один ключ с разными обработчиками недопустим. Для персональных данных отдельно проверяйте cookie, авторизацию и область кеша.
Кто что делает
Человек
Определяет публичность списка и требования к обновлению.
AI-агент
Настраивает ключ, обработку status/error и проверяет SSR/гидратацию.
Пример применения
Публичный каталог загружается через useAsyncData. При добавлении фильтра категории ключ включает её идентификатор; карточки показывают загрузку и ошибку.
Как проверить у себя
- При гидратации нет лишнего запроса того же результата.
- Смена фильтра меняет ключ или явно обновляет данные.
Первоисточники
История изменений на GitHubДата проверки отражает содержательную сверку. Синхронизация сайта не обновляет её автоматически.