Lumia Crystal 电商平台

Shopify 负责商务。前端完全由我打造。

完全解耦的 Headless 架构：Shopify 负责产品、库存和结账，定制的 Next.js 15 App Router 前端掌控体验的每一个像素 —— 实时目录、购物车、筛选搜索，以及让页面保持高速又不过期的分层缓存策略。

技术栈: Next.js
TypeScript
Tailwind CSS
Shopify API
React
分类: Full-stack

我的角色

前端 · 集成

我负责的

完整的前端架构和实现。从零设计 Headless 店面 —— 组件架构、Shopify GraphQL 集成、缓存策略、购物车系统和部署流水线。Shopify 负责后端的库存、订单和结账。

最难的地方

在电商场景中平衡数据新鲜度与性能。产品价格和库存在 Shopify 中变动，但每次加载都请求 API 太慢。4 层缓存策略让页面保持高速，同时确保消费者看到的价格不会过时超过 30 分钟。

一览

数据一览

产品: 60+
缓存层: 4
ISR 重验证: 30min
系列: 4
星座指南: 12
开发者: 1

技术栈

层层拆解

框架: Next.js
React
App Router · Turbopack
语言: TypeScript
严格模式
样式: Tailwind CSS
OKLCH 色彩系统 · CSS 配置
电商: Shopify
GraphQL
Storefront API —— 产品、购物车、结账
部署: Vercel
ISR · CDN · 图片优化 · 数据分析

Headless 架构

解耦设计

Next.js 掌管渲染和全部体验，Shopify 只作为库存、订单和结账的后端。两者之间只有 GraphQL。

自定义前端

Next.js 15App Router · SSG/ISR/CSR 混合渲染

购物车系统React Context + Shopify Cart API + localStorage

搜索与筛选元素 · 功能 · 星座分类

Shopify 后端

Storefront APIGraphQL · 产品、系列、元字段

托管结账Shopify 管理的支付和订单处理

Shopify 管理后台库存、定价和产品管理

基础设施

VercelCDN · ISR · 图片优化 · 数据分析

Shopify CDN产品图片通过 Shopify 边缘网络分发

4 层缓存策略

快而不旧

一个请求最多穿过四层缓存才会到达 Shopify —— 命中缓存时亚秒级，数据最多陈旧 30 分钟。

路由缓存客户端 · 30 分钟 staleTimes

完整路由缓存ISR · CDN 上的预渲染 HTML

数据缓存服务端 fetch() 结果缓存

Shopify APIGraphQL · 数据源

权衡

经受住考验的决策

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 主题文件。

在线演示

想了解完整细节？

很乐意聊聊这个项目背后的架构、决策与取舍。

访问项目 →联系我