I’m learning about getServerSideProps in Next JS and wondering what the best way to approach this question is:

Let’s say I want to take a input from a user, set a state in my functional component based on the user's input (for example, a zip code), then call something like this:

router.replace(router.asPath);

to re-fetch the component from the server-side.

I want the value the user input into the text box (the zip code) available to me on the server-side render in getServerSideProps

( getServerSideProps is making a call to an external API using zip code entered, and to do this, it needs an API key to the external service. I want the call to come from the server so as to protect my API key from being exposed in my client code).

Am I thinking about this wrong?

In a non-NextJS app, I would just use a fetch to call an API that would consume the input value, process the external API request on the backend, and respond with the result. So I suppose I could go down that route, I was just trying to wrap my head around how Next JS server-components work in tandem with the client-side component. like, can the two share a state like this or is it not a good idea?
Although I've worked with React, I'm fairly brand new to NextJS and server-side components. (just finished the Next JS intro tutorials.)