Как в Nuxt3 получить данные от API при рендеринге на сервере?

Question

[mrFlyer]

Привет.

Пробую получить данные с апи при рендеринге на сервере. Делаю по документации вроде, но данные подгружает только на стороне клиента. Что я делаю не так?

<template>
    <pre>{{ state._pageContent }}</pre>
</template>

<script>
import {reactive} from "vue";

export default {
  name: "index",
  async setup(){

    const state = reactive({
      _pageContent:false,
    });

    const { data, pending, error, refresh } = await useFetch('/index-page', {
      onRequest({ request, options }) {
        const RTConfig = useRuntimeConfig().public;
        options.headers = {
          'api-id': RTConfig.apiID,
          'api-key': RTConfig.apiKEY,
        }
        options.baseURL = RTConfig.apiUrl + '/v1';
      },
      onResponse({ request, response, options }) {
        state._pageContent = response._data._pageContent;
      },
    });

    return {
      state,
    }
  },
}
</script>

<style scoped></style>

Я уже и так и так пробую ... все равно на стороне клиента запрос уходит...

$fetch(`/index-page`)
        .then(response=>{
          state._pageContent = response._pageContent;
        });

await useAsyncData('_pageContent',
        () => $fetch( `/index-page`)
            .then((response)=>{
              state._pageContent = response._pageContent;
            })
    );

Comments

[VegasChickiChicki]

Заметил что nuxt 3 делает запрос на клиенте, даже если данные уже были отрендерены на сервере. Сам не понимаю почему. В разметке пришедшей с сервера данные которые были получены по API уже есть, а запрос все равно проходит и на клиенте, при первой загрузке страницы... Что-то они там намудрили.

Самый главный вопрос, SSR то включен в конфиге?

[nbnbdv]

mrFlyer привет, нашли ответ?

[mrFlyer]

nbnbdv, Сделал $fetch через composables

export const useApiFetch = (request,opts = {}) => {
    const runtimeConfig     = useRuntimeConfig();
    const RTConfig    = useRuntimeConfig().public;
  
    if (opts.query === undefined) opts.query = {};

    if (opts.method === 'POST'){
        opts.body = JSON.stringify(opts.query);
        opts.query = {};
    }

    return $fetch(request, {
        baseURL: runtimeConfig.public.apiUrl,
        headers:{
            'Accept':'application/json',
            'Content-Type':'application/json',
            'api-id': RTConfig.apiID,
            'api-key': RTConfig.apiKEY,
        },
        ...opts
    })
}

В итоге получилась рабочая и привычная для меня конструкция:

await useApiFetch("/remote-url")
    .then((response)=>{
      //logic
    })
	.catch((error)=>{
	  // error
	});

PS В компосабл еще добавил обработчик ошибок и выбиваю там сообщения об ошибках, что бы не заморачиваться на каждой странице catch. Получилось удобно.

[mrFlyer]

VegasChickiChicki, Да такая же беда... пока не разобрался с ней =(