You could store it inside a context, using the useContext hook

but then I can't use it with SSR, right?

I was thinking of the same (in a zustand store)

Ah, then you can fetch it in the getInitalProps, then set it as a data value passed into your page, where you can then set it into some context, no?

Admittedly I use NextJS with an Express backend, but pretty sure the same applies

If you are using the app dir, fetch requests will automatically be deduped by Next, so you can keep repeating the same request in multiple components and they will all use the same request. This removes the need to use context to pass the request results down to other components

My Cart.tsx Component is using "use client", can I still fetch it through SSR in this component, or do I need to create a wrapper component with SSR with this?

It would be better to wrap it with a server component, so it can fetch the data and pass it to the client component

Thanks much. I also want to create helper functions, such as "getDishById()". So it looks like with your suggested implementation I would always have to pass in the restaurantData, which we previously fetched, as a parameter as well?