So I have my nuxt 2 app where I want to fetch company reviews from an API on a single page. The API does not allow requests from the browser/client so I need to use a server for this call.
So I was using asyncData() with if (process.server) but now I have the issue that the data is only being fetched on the initial page load of the specific page. So if I switch routes in my app to the page where the review data is loaded, I am getting an error, since the review data can only be loaded server side.
I think I have a little comprehension issue here on how to solve this issue. Is there a best practice on how I should fetch my review data in order to access it on this specific page even if this page was not loaded initially?
I am using static site generation for my nuxt app.
If you can have all of the data set at build time (full static mode), you could get it without any extra step.
Here, I guess that this is dynamic and you need more flexibility. So, there is no magic sauce here: you cannot have a server-side call made on each client-side navigation (like SSR Next.js does). Nuxt will stay isomorphic and be client-side only after the initial render (done on the server).
You could have a serverMiddleware into your Nuxt2 app but it's pretty tricky overall and not really worth the effort IMO: https://stackoverflow.com/a/72102209/8816585
(quite easier with Nuxt3)
Solution: use an external server middleware (could be an edge/serverless function) to fetch the private data and send it back to Nuxt.