developers_easternts
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.
5 replies
Challenges in Implementing Server-Side Rendering (SSR) with Authentication and Refresh Token Logic
Hi everyone!
I'm facing some major challenges with implementing SSR in my Nuxt.js app, which uses a Laravel backend as the main server. The main issues are around authentication and refresh token logic.
Here's a quick summary:
1. Tokens stored in local storage can't be accessed on the server side.
2. useCookie (Nuxt composable) works only on the client side, so token cookies can't be accessed server-side.
3. Using setCookie (H3) works server-side only if httpOnly and secure are disabled, which compromises security.
4. Making the Nuxt server a mediator solves some issues but increases latency and API calls.
5. Refresh token logic requires interceptors, but Nuxt's oFetch lacks support. I'm using Axios, but managing token access between the server and client (especially for refresh tokens) is tricky. The Laravel backend handles some parts of the refresh token logic, which adds complexity.
6. Handling everything on the client side hurts SEO, which is critical for this SSR app.
Has anyone encountered these issues or found a good approach to handle this? I'd appreciate any advice or recommendations!
Thank you!
7 replies