站長阿川 · 09月18日

不要為了幾個互動元件，蓋一個前端專案

頁面用 Blade 渲染，只有需要互動的地方才放一個元件進去。

一個電商網站，真正需要互動的地方有幾個？

購物車、抽屜購物車、搜尋、手機選單、加入購物車按鈕、後台的複雜表單。大概就這些。

其他九成的畫面——首頁、商品列表、商品內容、文章頁、關於我們、訂單詳情——都是伺服器把 HTML 吐出來就結束了。

那為什麼要為了那一成，把整個網站改寫成 SPA？

一旦前後端分離，你就得面對：路由要寫兩套、驗證要寫兩套、狀態管理、SEO、首屏白畫面、還要維護一整套 API。而你換到的，只是那一成畫面的互動體驗——那些互動用伺服器渲染加一點 JS 也做得出來。

我的做法

頁面照常用 Blade 渲染。需要互動的地方，挖一個洞：

<div id="cart-page-root"></div>

然後在同一個 blade 檔裡，把一個 Preact 元件掛上去。

render(html`<${CartPage} />`, document.getElementById('cart-page-root'));

這就是所謂的 islands architecture（島嶼架構）：整片海是伺服器渲染的靜態 HTML，島嶼是零星幾個互動元件。

好處很實際

壞掉的範圍是有界的。 搜尋的元件炸了，搜尋不能用，但商品頁、購物車、結帳全都活著。SPA 的話，一個 render error 就是整站白畫面。

SEO 不用煩惱。 商品內容本來就是 Blade 吐出來的 HTML，爬蟲直接看得到，不需要 SSR、不需要預渲染。

新人看得懂。 想改購物車？打開 cart/index.blade.php。不需要先搞懂路由設定、狀態管理、build 流程。

什麼時候該用 SPA

當你的產品本身就是一個應用程式——後台的複雜編輯器、儀表板、即時協作工具。那種介面 90% 都是互動，用 islands 反而綁手綁腳。

但電商網站不是應用程式，它是一本會結帳的型錄。 型錄用伺服器渲染就好。

我看過太多中小企業的電商，用了一套跟團隊規模完全不成比例的前端架構。三年後那個專案沒有人敢接，因為當初寫的人走了，而那套東西的複雜度，是為了另一種規模的公司設計的。

先問需要互動的地方有幾個。 如果答案是六個，那就放六個元件，不要蓋一個前端專案。

站長阿川

⭐️ Shopify 網站開發服務（給品牌）
https://job.turn.tw/shopify-services

⭐️ 川川電商事務所（全客製電商開發服務）
https://chuanchuan.tw

⭐️ 台灣 Shopify 商家交流 LINE 群（非官方）
https://line.me/ti/g2/PZ_1LILWVWWuzZQ50HNpYA-A3k6QXWF6znqoBQ

⭐️ 台灣 Shopify 開發者 LINE 群（非官方）
https://line.me/ti/g2/YUasX5K3CJ4QdIx76zppjHlh3-q8w-xkSyK1LA

0個讚 0留言 2瀏覽

共有 0 則留言

登入之後發表留言

文字內容提供幾種功能：
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式

站長阿川

🏆 本月排行榜

🥇

站長阿川

📝45 💬1

643

評分標準：發文×10 + 留言×3 + 獲讚×5 + 點讚×1 + 瀏覽數÷10

本數據每小時更新一次