Ответ
В Nuxt 3 можно использовать useAsyncData с опцией server: false, чтобы он выполнялся только на клиенте:
const { data } = await useAsyncData(
'key',
() => $fetch('/api/data'),
{ server: false }
)Также можно использовать useFetch с той же опцией:
const { data } = await useFetch('/api/data', { server: false })Это полезно, когда:
- Данные требуют доступа к браузерному API (localStorage, window и т.д.)
- Нужно избежать дублирования данных при SSR
- Данные должны обновляться при навигации клиента
Для более сложных сценариев можно использовать onMounted + обычный fetch.
Ответ 18+ 🔞
Да ты посмотри, какая хитрая жопа у этих Nuxt-разработчиков! Ну реально, подозрение ёбать чувствую — они всё продумали, чтобы мы тут не выёбывались с серверным рендерингом.
Смотри, если тебе надо, чтобы запрос летел строго с клиента, а не с сервера — ну, там, к localStorage доступ нужен или ещё какая браузерная хуйня — то вот тебе два рабочих варианта, как гвоздём прибить.
Первый — через useAsyncData. Берёшь и прямо в опциях пишешь server: false. Всё, приехали. Сервер этот вызов нахуй проигнорит, а на клиенте — пожалуйста, работает.
const { data } = await useAsyncData(
'key',
() => $fetch('/api/data'),
{ server: false }
)Второй — через useFetch. Тот же принцип, просто синтаксис чутка другой. Опять же, server: false — и ты король клиентской стороны.
const { data } = await useFetch('/api/data', { server: false })А зачем это вообще надо, спросишь? Да элементарно, Ватсон!
- Если данные пиздят из
windowилиlocalStorage— без клиента тут нихуя не получится, сервер же не в браузере сидит. - Чтобы на сервере и на клиенте одно и то же не считалось дважды — зачем дублировать, блядь?
- Если хочешь, чтобы при переходе по страницам на клиенте данные обновлялись — вот тебе и механизм.
Ну а если совсем уж мудозвонская логика нужна, то можно и по-старинке, через onMounted и обычный fetch забабахать. Но это уже на любителя, ёпта.