业务背景
客户运营多个 DTC 消费品牌，原有 Shopify 模板站存在三个问题：首屏慢（LCP 3s+）、SEO 表现平庸、多站点各自为战无法复用。目标是以一套架构支撑多品牌独立站矩阵，兼顾性能与转化。
架构简述
- 前端：Next.js App Router，商品页 SSG + 库存信息 ISR 增量更新；
- 商务：Shopify Storefront API 作为 Headless 商品数据源，Stripe 承担支付；
- 分发：Vercel Edge CDN 全球节点，静态资源与 HTML 全部边缘缓存；
- 多站点：共享组件库 + 每站点独立的主题 Token 与内容配置，新站点从立项到上线 3 天。
核心业务成果
- LCP 0.8s，Lighthouse Performance 95+，Core Web Vitals 全绿；
- 6 个月自然搜索流量增长 180%，非广告订单占比从 31% 提升至 52%；
- 站点转化率 2.3%，高于行业基线约 40%；
- 新增一个品牌站的前端成本从 2 周降至 3 天。
技术难点总结
- Edge 缓存失效：商品价格与库存需要准实时，用 ISR 的按需重验证替代全量刷新，命中率与新鲜度取得平衡；
- 多货币展示：价格按用户区域在边缘函数内注入，避免整页动态化破坏静态缓存；
- SEO 迁移：老站 URL 301 映射表 + 结构化数据（Product / Offer / Breadcrumb）完整迁移，收录无缝切换；
- 图片体积：商品图统一 AVIF + 响应式 sizes，图片带宽成本下降 60%。