This is a great write up Kevin! One thing worth to mention is that if you are using fetch/axios and have to pass an API Token to your header, even if you use a variable from .env it will be visible on the network tab of your browser.
I know that this might be a bit out of the scope of this article, but I remember when I learned about keeping secrets safe, I thought I could just use .env to hide my API keys until someone told me that you could see them in the network tab haha
So yeah, in this case, the best way to do it is by using a serverless function. Like you said on the article if you use Netlify or Vercel both allow you to use serverless functions and you could fetch your super-secret endpoint with your API tokens there
Andrew Ross
Full Stack Engineer
Great article! For that client/server dependent secret you could use a ternary to further refine it.
const isServer = typeof window === “undefined”
fetch(
${isServer ? process.env.BASE_URL : “ “}/api/hello).then...