Full-stack
Lumia Crystal 电商平台
水晶珠宝 Headless 电商平台 —— 基于 Shopify Storefront API 的 Next.js 15 自定义前端，4 层缓存架构为 60+ 产品提供亚秒级页面加载。
Next.jsTypeScriptTailwind CSSShopify APIReact
我的角色
我负责的完整的前端架构和实现。从零设计 Headless 店面 —— 组件架构、Shopify GraphQL 集成、缓存策略、购物车系统和部署流水线。Shopify 负责后端的库存、订单和结账。
最难的地方在电商场景中平衡数据新鲜度与性能。产品价格和库存在 Shopify 中变动，但每次加载都请求 API 太慢。4 层缓存策略让页面保持高速，同时确保消费者看到的价格不会过时超过 30 分钟。
一览
60+
产品
4
缓存层
30min
ISR 重验证
4
系列
12
星座指南
1
开发者
技术栈
框架
Next.js 15 (App Router + Turbopack)
语言
TypeScript 5 (Strict Mode) · React 19
样式
Tailwind CSS 4 — OKLCH 色彩系统，CSS 配置
电商
Shopify Storefront API (GraphQL) — 产品、购物车、结账
部署
Vercel — ISR、CDN、图片优化、数据分析
Headless 架构
店面与 Shopify 完全解耦。Next.js 处理所有渲染和用户体验，Shopify 作为 Headless 后端管理库存、订单和结账。所有产品数据通过 GraphQL 查询 Storefront API 获取，购物车操作通过 Shopify Cart mutations 管理。
自定义前端
Next.js 15App Router · SSG/ISR/CSR 混合渲染
购物车系统React Context + Shopify Cart API + localStorage
搜索与筛选元素 · 功能 · 星座分类
Shopify 后端
Storefront APIGraphQL · 产品、系列、元字段
托管结账Shopify 管理的支付和订单处理
Shopify 管理后台库存、定价和产品管理
基础设施
VercelCDN · ISR · 图片优化 · 数据分析
Shopify CDN产品图片通过 Shopify 边缘网络分发
4 层缓存策略
每个请求最多经过 4 层缓存才会请求 Shopify API。这种架构确保缓存路由的亚秒级页面加载，同时在 30 分钟内保持产品数据新鲜。
路由缓存
客户端 · 30 分钟 staleTimes
完整路由缓存
ISR · CDN 上的预渲染 HTML
数据缓存
服务端 fetch() 结果缓存
Shopify API
GraphQL · 数据源
权衡
Headless 而非 Shopify 主题
Shopify Liquid 主题搭建快但限制设计和交互。Headless Next.js 前端提供了对浏览体验的完全控制 —— 按元素/星座自定义筛选、流畅的页面过渡，以及用 OKLCH 颜色围绕水晶美学构建的设计系统。
ISR 搭配 30 分钟重验证
产品每周变动几次，而非每分钟。30 分钟 ISR 窗口意味着页面几乎总是从 CDN 缓存提供，同时确保价格和库存更新在半小时内传播 —— 对于这个规模的目录来说是可接受的权衡。
Shopify 托管结账而非自建
自建结账意味着处理 PCI 合规、支付处理和欺诈检测。重定向到 Shopify 托管结账将这些全部卸载 —— 客户得到可信赖的支付流程，项目避免数月的合规工作。
Tailwind CSS v4 搭配 OKLCH 颜色
水晶产品需要感知一致的颜色 —— 紫色紫水晶旁边的蓝色蓝宝石应该感觉自然和谐。OKLCH 提供了 hex/RGB 无法实现的感知均匀性，而 Tailwind v4 的 CSS 配置完全消除了 JavaScript 主题文件。