電商該選 Next.js 還是 Hydrogen？
單一 Shopify 商店、追求最短整合路徑：選 Hydrogen。多站點、多資料來源（CMS、ERP、自建服務）、或需要商務以外的大量頁面：選 Next.js。Next.js 的 App Router 與部分預渲染讓內容頁走靜態、個人化走動態，同一套架構同時服務行銷與交易。
多站點、多來源、多市場，一個前端收斂。
系統各自為政
商店、官網、部落格、會員中心用四套系統，品牌體驗四分五裂。
框架綁定的顧慮
想保留未來更換商務後端的自由，不想被單一平台鎖死。
複雜整合需求
ERP、PIM、搜尋、推薦引擎——資料來源一多，架構就是勝負。
01 · 架構彈性
靜態的快動態的準
Next.js 官方文件：App Router 以 React Server Components 為基礎，Partial Prerendering 讓同一個頁面同時包含靜態外殼與動態內容。行銷頁走靜態、個人化走動態，不必二選一。
Server Components
資料在伺服器端取得與渲染，送到瀏覽器的 JavaScript 更少（Next.js 官方文件），複雜整合不拖慢前台。
Partial Prerendering
頁面外殼預先渲染、動態區塊以串流補上（Next.js 官方文件），內容頁的速度與購物車的即時性同時成立。
多來源聚合
Shopify、Sanity、ERP、搜尋服務，各種資料來源在一個 API 層收斂，前台只面對一種介面。
選 Next.js 的品牌通常在買一種保險：今天的商務後端是 Shopify，明天的版圖可能更大。抽象做對，前台就永遠不用重寫。
我們怎麼做
App Router 架構
伺服器元件與部分預渲染，靜態的快、動態的準。
多來源資料整合
Shopify、Sanity、ERP、搜尋服務——一個前端聚合所有來源。
Vercel 邊緣網路
全球部署、預覽環境與 A/B 實驗基礎設施原生支援。
可攜的商務層
商務邏輯以 API 抽象，未來更換後端不必重寫前台。
Hydrogen 與 Next.js 的選型對照
| Shopify Hydrogen | Next.js Commerce | |
|---|---|---|
| 商務整合 | 官方元件開箱即用 | 自組 API 聚合層 |
| 適合場景 | 單一商店旗艦體驗 | 多站點、多品牌矩陣 |
| 資料來源 | 以 Shopify 為中心 | 多來源同權重聚合 |
| 部署 | Oxygen（含在方案內） | Vercel 邊緣網路 |
| 更換商務後端 | 綁定 Shopify | API 抽象、可攜 |
合作流程
架構設計
資料來源盤點、渲染策略與快取設計
設計系統
跨站點共用的元件庫與品牌語言
開發實作
前端開發、API 聚合層與整合測試
上線優化
Vercel 部署、監測、實驗與迭代
架構的價值，在第三個站點上線那天最清楚。
常見問題
上線後若有基本的內容營運即可；工程維護可由我們以成長夥伴模式承接，品牌不需自建前端團隊。
可以，這正是 Next.js 的強項。商品與結帳走 Shopify，會員或訂閱走自建服務，前端統一聚合。
正確實作下是的。靜態預渲染＋邊緣快取讓首屏在百毫秒級回應，我們並以效能預算在 CI 中把關。
單店場景 Hydrogen 通常更省；多站點或重整合場景 Next.js 的複用效益會反超。評估時我們會給出兩案比較。
