How do I make a server-side request in my client-side rendered React app?

Question

I have a React app in which I need to make some API calls which include the API token in the request headers. I'm not concerned about rendering the whole app server-side as I don't care about SEO, performance etc., it's just a hobby app.

The only thing I want to do is make sure that the API calls are done server-side so that the authorisation header is not shown. Is there a way to implement this?

I've tried fetch and axios but they both show the headers in the Network tab.

I only really understand SSR and CSR at a basic level, so I'm not entirely sure if what I want is achievable, or whether server-side API calls require server-side rendering too.

Tradesman

Seems like your API calls are post-client-render. Could you give us a glimpse of code? – Tweeddale

@Tweeddale for example, I have a save button which triggers a POST to my own backend to save user input on the page to the DB – Tradesman

Ah, there you go. That's not what SSR is really about. Have a read here: smashingmagazine.com/2020/07/… (What Is Server-Side Rendering? (SSR) paragraph) – Tweeddale

I don't want SSR, I just want server-side API calls in my client-side rendered app – Tradesman

All the interactions on your webpage/app will result with non-transparent calls. By non-transparent I mean visible in devtools – Tweeddale

So how does one make server-side API calls on a client-side rendered app? – Tradesman

You don't. Not when app already got rendered on client side – Tweeddale

This seems like a major disadvantage of a client side app. All the blogs seem to talk about is SEO but having API tokens exposed is pretty major... – Tradesman

Answer 1

If you are using a client side app, then its not possible to call a api without showing the Authorization header. However you can do one thing is, you can add a node server as a middleware in between you React app and the server. You will call the node server for API and the node will call the actual data server with authorization. In that case, user will not see the authorization key as it will be set by the node server rather than your react app

If youa re concern about security, you also enable **App key ** and App secret and keep them in node server and with every api call, add those **App key ** and App secret with your request.

Distefano

Thanks for your answer, this looks like a good solution. What is the best middleware to use? – Tradesman

You can simply add a node server as a middleware. A stand alone NodeJs app. – Distefano

I don't understand what this means – Tradesman

As you are calling your API server, so in this solution, you will your node server. A stand alone node application which will just receive the API called by your React app and then it will call your API server with the authorization header and APP KEY and APP SECRET and eventually receive data from you API SERVER and send the data as a response to your React App. – Distefano

Also you can have a look at this boiler plate. This is actually what you can do github.com/monzoor/node-react-boilerplate Specially this one: github.com/monzoor/node-react-boilerplate/blob/master/server/… – Distefano

Thanks, I understand it now :) – Tradesman

Pleasure is mine. Hope I was useful :) – Distefano

More than useful, it worked perfectly! Thanks again – Tradesman