Help Needed: Nuxt 3 – Ensuring SSR-Only API Calls & Preventing CSR Requests During Navigation
Hi everyone,
I'm currently working on a Nuxt 3 application with multiple pages, and I've encountered some issues with SSR and CSR behavior during navigation:
My Use Case
I'm using useAsyncData directly within the <script setup> tag (with TypeScript) to fetch data from APIs for each page.
I want all API calls to be executed only on the server side so that the fully-rendered HTML is sent to the client without any additional client-side API requests.
When I navigate between pages using nuxt-link, the API calls show up in the network tab, indicating that they're being made on the client side, which I want to avoid.
When I refresh a page, the API calls are made on the server, at this point the token stored in Cookie using useCookie is undefined, making my request unauthenticated.
My Goals
I want to ensure that all API calls are handled only on the server side, even when navigating between pages using nuxt-link.
I also want to ensure that the request headers update with the token as Barrer token
I want to avoid any client-side API calls or refetching when navigating between pages.
Ideally, I want to keep the enhanced navigation experience provided by nuxt-link without sacrificing SSR-only data fetching.
Questions
How can I ensure that API calls are always executed on the server side, even during navigation using nuxt-link?
Is there a way to disable or prevent client-side refetching while maintaining smooth navigation between pages?
Thanks in advance for any help! I'd greatly appreciate any insights, recommendations, or examples from your experience.
I'm currently working on a Nuxt 3 application with multiple pages, and I've encountered some issues with SSR and CSR behavior during navigation:
My Use Case
I'm using useAsyncData directly within the <script setup> tag (with TypeScript) to fetch data from APIs for each page.
I want all API calls to be executed only on the server side so that the fully-rendered HTML is sent to the client without any additional client-side API requests.
When I navigate between pages using nuxt-link, the API calls show up in the network tab, indicating that they're being made on the client side, which I want to avoid.
When I refresh a page, the API calls are made on the server, at this point the token stored in Cookie using useCookie is undefined, making my request unauthenticated.
My Goals
I want to ensure that all API calls are handled only on the server side, even when navigating between pages using nuxt-link.
I also want to ensure that the request headers update with the token as Barrer token
I want to avoid any client-side API calls or refetching when navigating between pages.
Ideally, I want to keep the enhanced navigation experience provided by nuxt-link without sacrificing SSR-only data fetching.
Questions
How can I ensure that API calls are always executed on the server side, even during navigation using nuxt-link?
Is there a way to disable or prevent client-side refetching while maintaining smooth navigation between pages?
Thanks in advance for any help! I'd greatly appreciate any insights, recommendations, or examples from your experience.
