How to make multiple useFetch requests without hydration errors | Nuxt | Page 1

I'm making multiple useFetch calls to fetch paginated content. All works well except that I get hydration errors that I'm struggling to resolve. Using a single useFetch for partial data works flawlessly. I understand that response needs to be handled differently but cannot figure out how. Any ideas would be highly appreciated!


const totalPages = 3
const response = ref<ProgramListResponse>({ data: [] })

for (let page = 1; page <= +totalPages; page++) {
  const { data } = await useFetch<ProgramListResponse>('/program-list', {
    baseURL: config.public.api,
    key: 'all-programs',
    query: { latest_episode: true, page: page, per_page: perPage },
  })
  if (data.value?.data) {
    response.value.data.push(...data.value?.data)
  }
}

#How to make multiple useFetch requests without hydration errors