I was trying to make a component which would dynamically load, fetching data on the server when being called. Unfortunately, I'm stuck with this error and don't know how to get around it.

Console log "Hello server" doesn't run on the server and the client gets the error bellow. Now my question is, is something like this even possible? I need to fetch data from my db which obviously cannot run on the client, I've looked into server actions but it doesn't seem like something that fits this use case. For anyone willing to take a look here's the sandbox of the problem. I would really appreciate any help or idea on how to overcome this.

https://codesandbox.io/p/sandbox/twilight-architecture-7mn8r9?file=%2Fapp%2FServerComponent.tsx%3A11%2C33

Here's the structure I'm trying to achieve

ServerComponent
  ClientComponent which renders ServerComponent on state change
      Dynamic ServerComponent that fetches data from db
        ClientComponent

Error happens once you click "Hello"