I've been diving into NextJS lately and I've encountered a situation where I'm using both server-side and client-side components within my application. I've created a drawing illustrating all the different components involved, with some being server components responsible for fetching data and others being client components where I need to track state.

Here's the tricky part: I need to fetch data in the server component for initial rendering, but I also require state tracking on the client side for dynamic updates.