Server component reload is not synchronized with client state?
I'm building a small project to try and get a grip on how the app router and server components work and I'm facing a problem I cant seem to solve. I have a simple checkbox client component which pushes query params depending on what is selected then I have a server component that consumes these query params and fetches data based on them. The client component does router.replace onChange which normally triggers the server component to change but it so happens that they are usually out of sync. For example the checkboxes and query params would indicate state1 but the server fetching would indicate state 0 and so on.
I have tried messing with the caching revalidation, forcing the page to be dynamic and so on, stack overflow hasn't proven to useful either having already tried most of the solutions I could get my hands on without much success.
Is this usecase good for server components?
Is there any pattern im missing here?
here is the code: https://paste.ofcode.org/UNEyXSZf5iec9XxUNerL9F
2 Replies
I'm not sure I follow - you have a server component, that has rendered something on server, then you have a client component with a checkbox, that client component pushes new URL, but why do you expect that to cause the browser to refetch the page, thus triggering a server component re-render?
Server component is meant for doing server side stuff, like fetching data, then rendering whatever it does - SSR - then it's static HTML basically. Only nested client components will be interactive, hence interactive boundary. You're kind of expecting a server component to be interactive? If you want server data onClick, set up an api handler nad fetch that.
I think i found the issue though, the server component was on the same level as the client component, by putting the client component as a leaf of that server component the behaviour seems to work as expected