export default defineNuxtConfig({
  devtools: { enabled: true },
 // ssr:false, //Все страницы отображаются для клиента
  routerRules:{ // Укажите страницу маршрутизации, которая будет отображаться для клиента.
      '/home': {
          ssr:false
      }
  }
})

<template>
  <div>
    <div v-for="item of list" :key="item.name">
      {{ item.name }}
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const list = ref([])
const { data } = await useAsyncData(
  'id', // Необходимо ввести уникальный идентификатор
  () =>
    $fetch('https://xxx.xxx.com', {
      headers: {
        ...
      }
    }),
  {
    pick: ['data'], // Выберите нужные свойства в возвращаемом объекте
    // lazy: false, // По умолчанию здесь установлено значение false Блокирует отрисовку маршрута (необходимо дождаться запроса Маршрут будет перенаправлен после возвращения данных)
    lazy: true // Это не будет блокировать переходы по маршруту, но после перехода данные будут отсутствовать. Вам необходимо отслеживать данные с помощью наблюдения, а затем присваивать значение.
  }
)
 // Его нельзя удалить, иначе при загрузке первого экрана будет выдано сообщение об ошибке.
list.value = data.value
watch(data, () => {
  list.value = data.value
})
</script>

<template>
  <div>
    <div v-for="item of data" :key="item.name">
      {{ item.name }}
    </div>
  </div>
</template>
<script setup lang="ts">

const { data } = await useAsyncData(
  'id', // Необходимо ввести уникальный идентификатор
  () =>
    $fetch('https://xxx.xxx.com', {
      headers: {
        ...
      }
    }),
  {
    pick: ['data'], // Выберите нужные свойства в возвращаемом объекте
    // lazy: false, // По умолчанию здесь установлено значение false Блокирует отрисовку маршрута (необходимо дождаться запроса Маршрут будет перенаправлен после возвращения данных)
    lazy: true // Это не будет блокировать переходы по маршруту, но после перехода данные будут отсутствовать. Вам необходимо отслеживать данные с помощью наблюдения, а затем присваивать значение.
  }
)

</script>

const { data } = await useFetch(
  'https://xxx.xxx.com',
  {
    headers: {
     ...
    },
    transform: (res: any) => res.data.films, // Если возвращенного контента слишком много, вы можете отфильтровать его. Желаемый возвращаемый контент
    // lazy: false, // По умолчанию здесь установлено значение false Блокирует отрисовку маршрута (необходимо дождаться запроса Маршрут будет перенаправлен после возвращения данных)
    lazy: true // Это не будет блокировать переходы по маршруту, но после перехода данные будут отсутствовать. Вам необходимо отслеживать данные с помощью наблюдения, а затем присваивать значение.
  }
)

</script>