Noob in need of help: Server Component fetch under Client Component dynamic filter
Unanswered
Transvaal lion posted this in #help-forum
Transvaal lionOP
So guys, this is my first NextJs project, and I'm struggling with some stuff.
I'm creating a Event Calendar of sorts, and the events have many small details that can be used in filters... What I want to achieve is a way to display them in the calendar but change what is displayed using the Client Component filters... For instance, I would like to dynamically change the dateFrom and dateTo passed in the query, and also filter out events by category...
So far, I achieved it with Server Actions: I get all the events from the desired month, plus the events from a month before and a month after... If the user goes to the next or previous months, the events are already there, even during the updating fetch (that will request the new month and its neighbours)...
But I heard somewhere that doing fetches in Server Actions is not desirable, and that it should be done in Server Components... The thing is: all the filtering parameters are stored in state variables in the frontend, and I don't know how to pass what to fetch coming from a Client Component down to a Server Component... If I try to nest a Server Component under a Client Component, it then becomes a Client Component itself, and the server only imports begin to break and raise problems...
I need a way for the filter choices to be in a Client Component and then pass them to the server component that will perform the fetch and update the data... Ideally, only the filter thing would be a ClientComponent, the table like component with the filtered results would be a Server Component?
Beyond all that, things that I would like some guidance:
1 - I know that this refetching of months is suboptimal, and I sould find a way to store already fetched months locally...
2 - I have no clue on how to keep this up to date: if the events change in the backend, how to update them in the frontend without depending on a user triggered action? I need some sort of Stale While Revalidate with periodic refetches... Any hints on that?
I'm creating a Event Calendar of sorts, and the events have many small details that can be used in filters... What I want to achieve is a way to display them in the calendar but change what is displayed using the Client Component filters... For instance, I would like to dynamically change the dateFrom and dateTo passed in the query, and also filter out events by category...
So far, I achieved it with Server Actions: I get all the events from the desired month, plus the events from a month before and a month after... If the user goes to the next or previous months, the events are already there, even during the updating fetch (that will request the new month and its neighbours)...
But I heard somewhere that doing fetches in Server Actions is not desirable, and that it should be done in Server Components... The thing is: all the filtering parameters are stored in state variables in the frontend, and I don't know how to pass what to fetch coming from a Client Component down to a Server Component... If I try to nest a Server Component under a Client Component, it then becomes a Client Component itself, and the server only imports begin to break and raise problems...
I need a way for the filter choices to be in a Client Component and then pass them to the server component that will perform the fetch and update the data... Ideally, only the filter thing would be a ClientComponent, the table like component with the filtered results would be a Server Component?
Beyond all that, things that I would like some guidance:
1 - I know that this refetching of months is suboptimal, and I sould find a way to store already fetched months locally...
2 - I have no clue on how to keep this up to date: if the events change in the backend, how to update them in the frontend without depending on a user triggered action? I need some sort of Stale While Revalidate with periodic refetches... Any hints on that?
3 Replies
Pacific sand lance
The thing is: all the filtering parameters are stored in state variables in the frontend, and I don't know how to pass what to fetch coming from a Client Component down to a Server Component...
sync state with serach params, then access searchParams prop in server component
But I heard somewhere that doing fetches in Server Actions is not desirable, and that it should be done in Server Components...Yes, true.
The thing is: all the filtering parameters are stored in state variables in the frontend, and I don't know how to pass what to fetch coming from a Client Component down to a Server Component...like ngr said, just use router.push to update the new params. then at new request, it wil re-read the search params in server component (which the u can get data at top-level server component)
1 - I know that this refetching of months is suboptimal, and I sould find a way to store already fetched months locally...using server-side caching. same data will be fetched instantly and u wouldn't have to re-connect to ur source of data. also plus side: you dont need to be hassled with client-side state mgmt
2 - I have no clue on how to keep this up to date: if the events change in the backend, how to update them in the frontend without depending on a user triggered action?thats the one cost you need to take measure. the way web works is that ur site dont automatically fetch for new data unless being request to. that being said you can either keep it simple and only get new data when refreshed (most people is fine by this and understand this drawback) and can save you lots of server resource. but if you insists, there is two ways;
either you do polling or realtime websocket conenction. polling is easier to implement but is heavy on the server network since u basically just request for like every 5 seconds and multiply that per active users.
or realtime connection which is even worse and more engineering required.
I need some sort of Stale While Revalidate with periodic refetches... Any hints on that?SWR wont fix this, periodic refetches are just what people commonly refer to as polling.