Have to constantly split my server page to client components
Unanswered
piscopancer posted this in #help-forum
😟
I noticed that on highly interactive pages I mostly use async pages for fetching. It looks like the following all the time:
1. Data is fetched in an async page.
2. Data fills the markup.
3. Where markup needs interaction (buttons/tooltips/dropdowns etc) a client component is created for this particular page in a separate file.
I end up using my page as a way of fetching data, even though 80% of page content is client components. I can make my page client-side to put everything in one place but I won't be able to make this page
I noticed that on highly interactive pages I mostly use async pages for fetching. It looks like the following all the time:
1. Data is fetched in an async page.
2. Data fills the markup.
3. Where markup needs interaction (buttons/tooltips/dropdowns etc) a client component is created for this particular page in a separate file.
I end up using my page as a way of fetching data, even though 80% of page content is client components. I can make my page client-side to put everything in one place but I won't be able to make this page
async and fetch from db easily. How do I escape this a-new-file-for-a-small-client-component hell? Is it even hell as is? I may be mistaken, what if it is in fact intended design?18 Replies
American Chinchilla
Do you mean you want to have your page be server side
And have some children be a mix of server and client side?
@piscopancer
hi man, not really. I want to stop creating separate files for client components with a
"use client" directive bcs there can be only one SSR page and a ton (10+) small interactive ui elements on it which need to be made client-side. You can guess, I will end up with 1 page importing a dozen of client components, a folder will contain a dozen of files with 10 lines of code each. Not so greatDo I want too much?
American Chinchilla
What are the client components right now?
In the picture it looks fine
right now? just one, it shows a tutor's name and displays a popover upon click. In one hour of work there is going to be a dozen of such components
American Chinchilla
Its hard to say without more details
But you can split them up into sections if possible
This giving each section it own branch while still being server side
But having multiple components isnt a problem if this project is big
Thats pretty normal for large apps. Even in real codebase there like 1000 of components
Some can all be client side at least the “leaves” are
@American Chinchilla Thats pretty normal for large apps. Even in real codebase there like 1000 of components
Hm, I did not know that. If that's how things have to be, I will keep creating client components bcs doing so seems to be accepted by the community
I also thought of making a page server side (for fetching on server obviously) and the component it returns is the Whole markup, client-side, like so
page.tsx (async fetch, no markup, only returns
page-content.tsx (client-side, interaction inside)
page.tsx (async fetch, no markup, only returns
PageContent)page-content.tsx (client-side, interaction inside)
only 2 files, everything clean