NuxtJS renderowanie SSR a odpowiedzi JSON

Question

Witajcie, mam problem ze zrozumieniem SSR, może ktoś mi to rozjaśnić

wchodzę na stronę główną przekierowuje mnie na /login, która wyświetla się w network jako html

loguje się a w network widzę zwrócone json ze statusem 200 i tokenem ?!

po poprawnym logowaniu przekierowuje usera do /about gdzie wykonuje zapytanie o uprawnienia będzie ich może z 20 opcji może więcej, i całość powinna trafić do mnie jako SSR - gotowy html, dobrze to rozumiem ?

czemu widzę JSON? w network 

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  css: [
    "@/assets/main.css",
  ],
  compatibilityDate: "2024-04-03",
  devtools: { enabled: true },
  ssr: true,
  app: {
    baseURL: "/",
  },
  runtimeConfig: {
    public: {
      apiUrl: process.env.VITE_API_URL || 'http://localhost:3000',
    },
    private:{
      JWT_SECRET: process.env.JWT_SECRET,
      COOKIE_NAME: process.env.COOKIE_NAME,
      COOKIE_MAX_AGE: process.env.COOKIE_MAX_AGE,
      COOKIE_SECURE: process.env.COOKIE_SECURE
    }
  },
  routeRules:{
    "/**":{
      ssr: true,
      appMiddleware: ["auth"],
    }
  },
  devServer:{
    port: 3001,
    host: '0'
  }
});

 

 

<template>
  <div>
    <h1>Strona About</h1>
    <div v-if="role === 'HA'">Treść dla administratora tutaj</div>
    <div v-else>Treść dla użytkownika tutaj</div>
  </div>
</template>

<script setup lang="ts">
import { useAsyncData } from '#app';

const { data } = await useAsyncData('userRole', async () => {
  const response = await $fetch(`${useRuntimeConfig().public.apiUrl}/api/userRole`, {
    method: 'POST',
    credentials: 'include',
    headers: {
      'Content-Type': 'application/json',
    },
  });
  return response;
});

const role = data.value.role;
</script>

a nie działa to jak w php, po zalogowaniu się dostaje gotowy index.php