Next.js Discord

Discord Forum

I have a server component inside a client component, and a button to show/hide the server component.

Unanswered
Japanese common catfish posted this in #help-forum
Open in Discord
Japanese common catfishOP
I have a server component inside a client component, and a button to show/hide the server component. The server component fetches some data, but it does on page render. I need it to fetch only after I click the button to show it.


Here's my current code.
{datas.slice(0, 4).map((data, index) => (
              <div
                className="col-span-12 md:col-span-6 lg:col-span-3"
                key={index}
              >
                <ClientComponent data={data}>
                  <ServerComponent data={data}>
                    <Button>View</Button>
                  </ServerComponent>
                </ClientComponent>
              </div>
            ))}

9 Replies

Giant panda
You can just have a state within the client component and conditionally render the server component. Also, the way you have it in the snippet, your server component isn't actually a server component. Since you are importing a server component within the client component, it is now a client component as well.
Japanese common catfishOP
but fetching data works in the server component tho
Siberian Flycatcher
The server component fetches some data, but it does on page render. I need it to fetch only after I click the button to show it.

By the time browser renders your app on the client, all server components have already been rendered (on the server) and fetched the data.

So, depending on UX, you can do one of those:

1. Fetch data in the client component instead (when it renders)

2. Keep fetching in the server component, but move your state to the URL and "hide / show" the component with router.push or Link https://twitter.com/asidorenko_/status/1678077582560854017
Japanese anchovy
Yea, once you include a client component anything after that point in the tree is client. It is true that you can grab all the data on the server side and pass that to client components. Once a server component is rendered its basically just html markup at that point. There are ways using css and maybe hidden radio/checkboxes to apply some styling for hiding etc. You could also add a style directly to the element using document.querySelector but some would probably say it isn't the React way but honestly imo it is still less js bundled and sent to the browser.
creates I guess you could call it a leaky abstraction. in some cases it may work in others maybe isn't the best route. for me, I've been handling basic interactions with css/radio buttons for like collapsible panels etc. Because of not using state and others lifecycle methods you would see in full client apps the amount of complexity in our code has dropped significantly.
Japanese common catfishOP
Thank you all! I went with fetching data in the client component instead thanks @Siberian Flycatcher
Asian black bear
You could also find some way to have the server component live in the {children} of the client component
<ServerThing>
  <ClientWrapup>
     <OtherServerThing/>
   </ClientWrapup>
<ServerThing>
the only thing is that the client component cannot import the server component, it can handle the server component opaquely as children