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.