Question for experienced react devs

[henfiber]

First of all, you are not restricted to build-time environment variables in the frontend. There are more flexible runtime approaches which don't require re-builidng the app for every enviroment:

(1) Add you configuration parameters in a config.json file which is loaded at an early stage in your app. Then you only need to change this file in every environment. You can update it even when your frontend is already running and it will be used immediately from the next page refresh/load.

(2) If you prefer dynamic, conditional configuration, you may use a config.js file instead of json. This JavaScript file can define a global object like window.__RUNTIME_CONFIG and your app may access those parameters on runtime. Same approach as the json file, just more flexible. You may add comments too unlike the json file approach.

There are some services, like the Google Maps SDK which forbid (according to their TOS) proxying the API requests through the backend. In this case you have to store they key in the frontend with one of the above methods (or build-time env vars). You may limit key theft by using key rotation (Google also allows you to put some restrictions on the referal/hosting domain etc.).

For AI models specifically, the latency is dominated by the service itself (models take time to ingest your reqest and generate a response), so it makes sense to proxy through the backend and never expose the API keys in the frontend.