Lumia Crystal 电商平台
水晶珠宝 Headless 电商平台 —— 基于 Shopify Storefront API 的 Next.js 15 自定义前端，4 层缓存架构为 60+ 产品提供亚秒级页面加载。
- 角色
- 独立开发 · 前端架构
- 年份
- 2025
- 类型
- 电商 · Web
- 状态
- 运行中
Shopify 负责商务。 前端完全由我打造。
完全解耦的 Headless 架构：Shopify 负责产品、库存和结账，定制的 Next.js 15 App Router 前端掌控体验的每一个像素 —— 实时目录、购物车、筛选搜索，以及让页面保持高速又不过期的分层缓存策略。
我的角色
前端 · 集成
完整的前端架构和实现。从零设计 Headless 店面 —— 组件架构、Shopify GraphQL 集成、缓存策略、购物车系统和部署流水线。Shopify 负责后端的库存、订单和结账。
在电商场景中平衡数据新鲜度与性能。产品价格和库存在 Shopify 中变动，但每次加载都请求 API 太慢。4 层缓存策略让页面保持高速，同时确保消费者看到的价格不会过时超过 30 分钟。
一览
数据一览
技术栈
层层拆解
- 框架
- 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 15
- 购物车系统
- 搜索与筛选
Shopify 后端
- Storefront API
- 托管结账
- Shopify 管理后台
基础设施
- Vercel
- Shopify CDN
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 主题文件。
