I've been thinking straight for 2 days. Nobody on stackoverflow is answering, nobody else knows how to handle this and I'm so so desperate for help. I'd be no-joke forever grateful for an answer.

Overall, my application relies on a browser extension that allows users to sign data with their private keys, while revealing their public key as some sort of a "username".

The users are able to submit "products" and view them others products at any time. So I have a route, /products. This route is handled by the component ProductsPage, which is a server component that fetches products (this doesn't need authentication or any user specific data).

Now, each user could have "bought" the product. So, they may decide to connect the browser extension to my page and give me their public keys. If user gives me the public keys, I have to fetch user-specific information, such as how many units the user has bought. I need the users public key to do that, and I want to fetch this using a server component. I could easily do this client-side, but it would increase latency.

To understand whether the user connects the browser extension, I have a hook called "useKeys()" which returns the users public key if the user connects their account. This must be executed on the client side.

I don't know how to structure this. Basically, this is how I want it to look (with server/client indicated at the end of the component name):

<ProductsPageServer>  // /products, fetches products from the server, doesn't need any login
    <KeyListenerClient> // uses useKeys() hook to listen to authentication, must be client.
        <UserProductInteractionsFetcherServer> // must be server, accesses the data
            <Rest_Of_The_Stuff_No_Problem_Client />
        </UserProductInteractionsFetcherServer>
    </KeyListenerClient>
</ProductsPageServer>

I can fix the whole problem by making <UserProductInteractionsFetcherServer> a client component, but then data will be fetched client-side.