Does it make sense to fetch data in a client component at all?
Unanswered
Spectacled bear posted this in #help-forum
Spectacled bearOP
Hey all, I am currently building out a carousel component. Works great with everything as RSC, but now I want to add the ability for a carousel item (image) to be clicked and then open in a modal.
Right now, I am getting a list of photos via the Google Places API. It returns an object that contains photos, with a "name" property that is then used as a parameter in another Google endpoint that then returns the actual URL. Right now, that fetch for the image URL is inside the carousel component (pass in the photos, then for each carousel item that's rendered, fetch the URL and apply to <Image /> component.
Obviously in order to use event listeners my carousel component needs to be a client component, which is fine. But then I run into the issue of needing to fetch the individual images inside of a useEffect, which feels dirty. Is this an anti-pattern, or just a side effect sometimes of wanting to use client components?
Right now, I am getting a list of photos via the Google Places API. It returns an object that contains photos, with a "name" property that is then used as a parameter in another Google endpoint that then returns the actual URL. Right now, that fetch for the image URL is inside the carousel component (pass in the photos, then for each carousel item that's rendered, fetch the URL and apply to <Image /> component.
Obviously in order to use event listeners my carousel component needs to be a client component, which is fine. But then I run into the issue of needing to fetch the individual images inside of a useEffect, which feels dirty. Is this an anti-pattern, or just a side effect sometimes of wanting to use client components?
3 Replies
Hmmm its a good question, I like it. Can you supply us with the code? There might be some.... ways around it lol
You could apply a invisible mask to the server component that is a client component that handles the modal popup.
essentially overlaying your image with a client component and passing the image down to it via props... lol...