How to avoid State management and still manage global state in Next js

[krishnaacharyaa]

Summary

I have application where A B C D are components,
Lets assume we have state stockLevelSelected and this should be accesible to anyone and anyone should be able to mutate this.
For this the only solution i see if not maintaining a state in pass setStockLevelSelectedHandler and stockLevelSelectedHandler as props to the components which needs it.
To avoid this I thought of using Context Provider, but this is in client side and it forces all of its children to be client side, so now what if I wanted to get api call on component C based on the stockLevelSelected which can be mutated by any other component like B A or D ?

API call would be done client side, how can i over come this ?

Is there different way of thinking on this.

Additionally I have initial data which is getting from the db, I want every component to have it when required, But also I want to revalidate the db, lets say in component D I want to revalidate, how do i do? because now Component D is client side.

Additional information

I am open to any other optimizations on the github code provided below

Example

https://github.com/krishnaacharyaa/nextjs-explore

[nirvikpurkait]

it forces all of its children to be client side

In Next.Js you can use server-component inside of client-component, without making the the children server-component being forced to client.

Maybe you are importing the server-component in the client-component file, if you did so, insted of importing the server-component in the client-component, pass it as a prop.

You can go through this article

[krishnaacharyaa]

@nirvikpurkait Thank you for your answer,
Even if i pass it as a server-component, I want to use context which requires client component. i.e

const { selectedDocument } = useAppContext(); // useAppContext needs "use client"

I want to fetch the http://localhost:3000/api/summary/${selectedDocument?.DocumentId} in server side by using selectedDocument which i can get from potential client rendered component

[beshur]

But this one needs to be done inside a smaller client component, as low as possible down the component tree. I don't think there is a way around it.