Hello everyone!

I honestly cannot find any solid information nor examples of my exact issue. Maybe I'm searching incorrectly? I don't know. So far nobody has been able to help yet.

As you might know, you can send props from a Server component to a Client component. But I need it the other way around. I have data in my Client component that I need to send to the Server component.

Next to that, I also want to call a function in a Server component from the client.

Let's say I have a fetch on the Server component, and the moment a user clicks on a button, let's call this "Fetch Data", it will run the function in the Server component called "getData", like this example:

async function getData() {
  const res = await fetch('https://api.example.com/${userId}')
  if (!res.ok) {
    throw new Error('Failed to fetch data')
  }
  return res.json()
}

Now I have a fetch on my server component, and a "fetch data" button on my client component with a specific prop, let's call this "userId", where it would fetch the url https://api.example.com/${userId}.

This would
1. send the userId prop to the server component
2. call the getData function, with the prop to fetch the component using the Server, for the sensitive data.

Is this even possible? If so, how? I am genuine lost on this and I don't know where to look further. There is little to none documentation, or it's not understandable for less advanced users, like me.

Any help and/or examples are appreciated!