How would I accomplish the following pattern in next.js 14?
- There is a date picker, and there is a component that displays data.
- When picking a date, the data should change appropriately.
- The data should be fetched on the server (hard requirement, secret credentials).
- The date-picker itself should not be re-rendered, and there shouldn't be any flash of empty content while the new data is fetched.
- The component that displays data also includes a text input element for client-side filtering, and the client-side filtering state (ie the value of the input element) should be preserved when the date changes.

Here's why I'm stuck:
- The picker must be a client component since it has event handlers, etc.
- The data fetcher must be a server component because of the secret credentials.
- There's no way to pass the date from the picker as a prop to the server component doing the fetching, because server components can't be imported inside client component code.

How do I get around this? I'm aware of one possible solution (using route parameters), here's why it doesn't work for me:
- (minor point) I don't want it visible in the URL.
- the text input element for client-side filtering must be a child of the data-fetching component. this means that when the data-fetching server component gets re-rendered, it'll get re-rendered and the contents of the text box will be lost.

I could also fulfil all my requirements (no re-rendering of interactive components AND data request happens on the server) by using an API endpoint rather than a server component, but this seems to defeat the whole point of next.js: on first page load, before any data is displayed, the browser will have to download, parse, and execute the client JS bundle. It feels like I should be able to combine server-side rendering on first page load and client-side rendering when users interact with the components.

Thanks for any help 🙂