小型市场站点前后端分离部署、Next.js与Vercel使用及图片存储方案咨询

问题1：是否需要将Next.js迁移到后端托管服务器，使用共享目录存图片？ #

不需要，这个方案反而会带来更多问题：

• 首先Vercel并不是只支持纯静态站点，Next.js的SSR、ISR、Edge Runtime等核心特性在Vercel上都有原生优化支持，比你自行在服务器上部署运维成本低很多，性能也更好。
• 把图片存在后端服务器的共享目录，会导致图片访问流量完全占用后端服务的带宽，高并发场景下会直接影响接口的正常响应，甚至打满服务器带宽导致全站不可用，本身就是非常不合理的架构设计。

问题2：是否存在合理利用Vercel的方案？ #

存在，这也是目前这类项目的主流落地方式：

• 放弃「把图片存在后端服务器」的方案，改为将图片等静态资源存储在通用对象存储服务中，上传逻辑由后端负责，生成的资源链接直接返回给前端。
• 在Next.js的配置文件中配置对象存储的域名作为合法图片源，使用Next.js内置的next/image组件加载图片，Vercel会自动完成图片格式转码（自适应WebP/AVIF等压缩格式）、多尺寸裁剪、全球CDN缓存，图片加载速度远高于从自建服务器传输的效果，同时不需要额外占用后端服务器的带宽。
• 前端请求后端接口可以直接配置跨域访问，也可以通过Next.js的反向代理配置将/api/*路径的请求转发到你的后端服务地址，避免前端跨域问题，该配置在Vercel上完全兼容。

问题3：有没有其他替代方案？ #

如果不想使用第三方对象存储服务，可以自行搭建独立的静态资源服务：

• 单独准备一台服务器部署Nginx作为静态资源服务，专门用于存储和分发图片，和后端接口服务物理隔离，避免带宽、资源抢占。
• 后端实现图片上传到该静态资源服务的逻辑，前端直接从该服务的域名加载图片，同时可以在Nginx层配置缓存、流量控制规则，安全性和稳定性都远高于共享目录方案。
• 不推荐使用前后端共享目录的方案，该方案存在权限泄露、单点故障、扩容困难等多个问题，只适合极小体量的本地测试场景，不适合线上使用。

问题4：技术选型是否存在问题？ #

你的技术选型完全没有问题：

• Next.js是目前最成熟的React工程化方案之一，电商类站点对SEO、首屏加载速度的要求很高，Next.js的SSR/ISR特性刚好能满足这类需求，比纯SPA方案的用户体验和搜索表现好很多，不存在不适用的情况。
• 你目前遇到的问题是静态资源部署架构的认知问题，和Next.js本身无关，就算换用其他前端框架，也会遇到同样的图片存储和分发问题。

通用最佳实践 #

前后端分离架构下，不同职责的服务解耦部署是行业通用标准：静态资源层（图片、静态文件）负责资源存储分发、接口服务层负责业务逻辑处理、页面渲染层（Next.js）负责页面组装与用户交互，三者完全独立部署，各自按需扩容，不会互相影响，是这类项目的最优架构选择。

内容的提问来源于stack exchange，提问作者László Poroszkai