В SSR-приложении на Nuxt нативный fetch (например, в хуке asyncData или fetch) по умолчанию выполняется на сервере при рендеринге страницы. При переходе на клиенте (например, навигация по SPA) fetch может выполниться повторно, если не использовать специальные механизмы.

Чтобы сделать один запрос и избежать повторного вызова fetch на клиенте, нужно использовать встроенные возможности Nuxt для кэширования данных. Например, данные, полученные на сервере, автоматически инжектируются в HTML и доступны на клиенте через window.__NUXT__. Это позволяет клиенту получить данные из сгенерированного сервером состояния, а не делать повторный запрос.

Пример:

export default {
  async asyncData({ $axios }) {
    const data = await $axios.$get('/api/data')
    return { data }
  }
}

Здесь запрос выполнится на сервере при первом рендере, а клиент получит данные из встроенного состояния, не делая повторный fetch.

Если же fetch вызывается в хуках, которые срабатывают и на клиенте (например, fetch в Nuxt 2), можно использовать флаг process.server или process.client для контроля, где выполнять запрос. В Nuxt 3 есть более продвинутые механизмы для разделения запросов и кэширования.

Итого:

Запрос выполняется один раз на сервере при SSR.
Данные сериализуются и передаются клиенту в HTML.
Клиент использует эти данные из состояния, не делая повторный запрос.

Это позволяет оптимизировать загрузку и избежать лишних запросов.

Сколько раз выполнится нативный fetch в SSR-приложении на Nuxt? Как сделать один запрос? Откуда клиент получит данные?