React应用搭配Node.js服务端隐藏Google Maps JavaScript API密钥是否值得？

1. 为隐藏API密钥搭建专属服务端是否值得？ #

对你的个人作品集场景来说，完全不值得。
Google Maps API本身原生支持前端使用，只要做好两层防护就足够覆盖个人项目的安全需求：

• 在Google Cloud控制台为API密钥配置HTTP referrer限制，将本地开发地址、Heroku部署的线上地址加入允许列表，就算密钥泄漏也无法在其他域名下使用
• 不要将密钥硬编码在业务代码中，存放在React项目的.env文件里，变量名以REACT_APP_开头，同时将.env加入.gitignore避免上传到GitHub，部署时在Heroku的环境变量配置面板单独录入密钥即可
  额外搭建独立服务端只会增加你的开发和维护成本，对作品集项目来说性价比极低。

2. 后端拉取地图渲染数据的参考思路 #

如果你希望在作品集里展示全栈能力，确实想做后端代理逻辑，实现思路非常简单：

• 用Express搭建极简Node服务，仅做请求转发：前端需要调用地理编码、路径规划等Google Maps服务端接口时，先请求你自己的Node接口，Node服务从环境变量中读取API密钥，拼装参数后向Google接口发起请求，拿到返回结果后再透传给前端
• 实现时注意做好入参校验，避免代理接口被滥用，可按需增加简单的请求频次限制即可，整体逻辑没有复杂度，对照Google Maps服务端接口的参数要求开发即可

3. 是否应该使用React Server Components？ #

视你当前的项目架构决定：

• 如果你已经在使用Next.js 13+的App Router开发项目，完全可以使用RSC实现，在服务端组件内完成Google Maps相关的服务端数据请求，从根源上避免API密钥暴露到客户端
• 如果你使用的是传统客户端渲染的React项目，完全不需要为了这个需求特意改造为RSC架构，只会额外增加不必要的学习成本，前面提到的前端密钥限制方案已经足够安全

4. 是否需要更换使用的地图包？ #

根据你的开发进度和功能需求决定即可：

• 如果你已经基于google-map-react完成了大部分核心功能，且所有需要的能力都能得到满足，不需要更换，继续使用即可。这个包封装轻量、对新手友好，基础的地图渲染、标记点、信息窗口等常用功能都支持，完全可以满足作品集项目的需求
• 如果你还没有完成太多开发，或者需要用到Google Maps的高级能力（比如进阶图层、复杂路线渲染、深度集成Places API等），可以直接更换为官方的@googlemaps/react-wrapper包，官方包的API与Google Maps原生能力完全对齐，不会出现第三方包更新不及时、不支持新特性的问题，维护稳定性更有保障

内容的提问来源于stack exchange，提问作者Cecilia Mesquita Pacheco