intermediate
Data fetching
Загружайте данные через useFetch, useAsyncData, server routes, keys, pending, errors и hydration-aware кэш.
`useAsyncData` и `useFetch` выполняются на сервере при SSR и переиспользуют payload на клиенте при совпадении keys. keys стабильны и уникальны на логический запрос.
<script setup>
const { data, pending, error, refresh } = await useFetch('/api/posts', {
key: 'posts-list',
});
</script>
Server routes (`server/api`) — BFF рядом с приложением. Обрабатывайте `pending` и `error` в шаблонах; `refresh` для ручной revalidation.
На интервью: дедупликация по key, гонка навигации и in-flight fetch, cookies/auth на server fetch, отсутствие double-fetch после hydration.
Типовые ошибки: нет `key` → коллизии кэша, fetch и в page и в child без координации, секреты в client-visible URL.
Компромисс: скорость общего SSR payload против mental overhead стабильных keys и правил invalidation.
Чеклист:
- Стабильные keys: ресурс + params.
- await на server; pending на client.
- auth headers в server handlers.
- refresh/invalidate после mutations.