Hello everyone;

I am developing a Next.js 14 application that involves a user-driven process for building Elasticsearch queries. Here’s the workflow:

1. User Interaction: A server-side component fetches a list of indices and renders them as client components.
2. Index selection The user selects one or more indices, persisting the selection in the client state manager.
3. Query Building: Using a client-side UI, the user constructs an Elasticsearch query object, which persists in client-side state management.
4. Data Visualization: This query object and the array of selected indices must be accessible by multiple visualisation components (6-7), which should update in real time as the user modifies the query.

My Challenge: I am unsure whether these visualisation components should be client-side or if there’s a feasible way to pass the query object and index array as props from the client to server components.

Complication: Typically, solutions suggest passing values via the URL, but the complexity and size of the query object make this approach unfeasible.

Could anyone share insights or best practices on managing this state interaction between client and server components in Next.js? Any advice or references to similar implementations would be greatly appreciated.

Thank you in advance for your help!