1

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.

kissu
  • 40,416
  • 14
  • 65
  • 133
lucamario
  • 220
  • 1
  • 3
  • 12

1 Answers1

2

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.

kissu
  • 40,416
  • 14
  • 65
  • 133
  • Sounds good. I also had another thought in mind: Since the API Call only contains an object with three properties I thought about using a middleware which is called on every single route of my app. Through this middleware I am making the API Call and store it into the Vuex Store. I know it's not ideal but it might work, right? What do you think about that idea? – lucamario Jul 20 '22 at 19:24
  • @lucamario I'm not sure to understand here. If you need to have it fetched from the backend, what is the point of using a client side middleware here? Same for Vuex, not sure to understand how it could be useful here. If you were planning on fetching the whole thing once (on server) and put it into Vuex to then inject it on every page thanks to the client side middleware, it may work but it's still quite heavy for not a lot of benefits. Finally, there is no real difference between making a call in a component/page vs doing that same call in the client side middleware. – kissu Jul 20 '22 at 23:08
  • 1
    Yeah, you are right with the middleware, that's still only client side - my bad. Using a serverless function makes most sense here. I appreciate your help kissu for being so active in the nuxt community! – lucamario Jul 21 '22 at 09:52
  • @lucamario you're welcome. I'll dropped an upvote since you have phrased a detailed question, keep up too! – kissu Jul 21 '22 at 10:21