Should frequent external API calls be made from the front-end or back-end?

Question

I am building a React/Node.js web app that frequently uses the Spotify API (for searches, getting user data etc.) I am wondering if I should make requests to the Spotify API directly from the front-end, or make calls to my own backend which would then handle the Spotify API requests.

My thoughts:

Calling external API from front-end:

• Potentially slower experience for user as front-end has more code (for example making 3 Spotify API requests inside of a useEffect hook).
• Potential security concerns? Spotify API requires an access_token header on all requests.

Calling external API from back-end:

• Also potentially slower experience for user because of extra round trip to backend.
• Unnecessary requests to my own back-end (higher costs, cloud bill etc.).

Any advice here is appreciated.

Backdate

You should not expose oauth or access tokens to any client – Brunel

The only relevant argument here is the access_token part and that one must happen in the backend, end of "discussion". – Gomuti

You don't have a higher cloud bill if you use something like the Azure app service plan because it has a constant cost (if the extra load fits within the capacity of your particular SKU that is) – Expiate

Maybe you can cache responses from the API in something like a reddish cache in the back end to speed up client requests – Expiate

@Expiate sometimes cache can be more expensive than the bandwidth itself – Purgative

Answer 1

You should NEVER trust an external API on your frontend. It's a risk on many levels - mentioned access_token is a great example, of what might get you in trouble. On top of that, you have no control over what user sees, the API might change, exposing your personal details.

And let's not forget about CORS headers, external APIs usually won't let you set them up for your domain, meaning you'll have to proxy the response through your server anyway.

Purgative

Sorry for the noob question, but in terms of exposing the access_token in the frontend, isn't the worst case scenario that they can use that token to see more of their own information through that API? – Casual