# Svelte 給前端的一面鏡子，不是一張神主牌

> Svelte 同時保留 DOM 直覺、HTML-first 與清楚的 server 邊界，適合當評估前端框架的參考實作。要帶走的是這三條原則，換成別的框架一樣適用。

原文：https://sheng.page/posts/what-svelte-says-about-frontend/ · 發布：2025-11-22 · 作者：Sheng

我會拿 Svelte 當成評估前端工具的參考。它同時保留了幾件我在意的事：對 DOM 的直覺、以 HTML 表達結構，以及明確的 server 邊界。生態規模比 React 小，但設計較容易理解。

## 寫起來像標記加狀態

Svelte 5 的 runes 在去年十月發布，到現在算成熟了。它最值得看的地方，是把響應式從「靠編譯器猜」改成你自己寫清楚。`let count = $state(0)`，`count` 還是個普通數字，你照常 `count++`，要衍生值就 `$derived`，沒有 `.value` 包裝，也沒有 virtual DOM 那層 diff 夾在中間。編譯器幫你生出直接碰 DOM 的程式碼，你腦袋裡跑的模型，跟畫面上實際發生的事情幾乎是同一件。

這就接回我一直講的那條線：寫前端的人不該被框架糊掉對 DOM、對 HTTP、對瀏覽器的直覺。React 那套 re-render 模型逼你時時記得整個 function component 會重跑，於是有 `useMemo`、`useCallback`、依賴陣列一整組工具，那些多半在跟框架的執行模型角力，跟業務問題沒什麼關係。Svelte 把記帳收回編譯器，但記帳的規則列在你看得到的地方。少一層抽象，你離真正在發生的事就近一點，這跟先用標記描述結構、再包一層輕量行為的想法是同個方向。

當然顯式有它的代價，幾條規則要記：`$state` 套物件會回傳深層響應的 proxy，但 destructure 出來就斷了響應，class 欄位要各自標。這些不難，但你得知道。用「狀態怎麼流」去理解，別當 API 背，不然遲早在某個邊界踩到。

## HTML 是主角，JS 來補行為

SvelteKit 的設計很一致：預設 SSR 加 client hydration，`load` 在 server 跟 browser 都能跑，form actions 優先於自己刻 REST，progressively enhance 到有 JS 再加互動。換句話說，沒 JS 的時候那張表單照樣能送，JS 載進來只是讓體驗更流暢。這正是「HTML 是主角、JS 補行為」的標準姿勢，不是反過來先假設瀏覽器一定有一坨 JS 在跑、伺服器只負責吐 JSON。

把 server 當第一線、client 接手互動，這個分工跟 htmx 那種 server 主導互動的精神是同源的，只是 Svelte 走得更全。`+page.server.ts` 處理 server-only 的事，`+page.ts` 處理兩側都能跑的，真要做 API 才用 endpoint。它沒有把所有東西都吸進框架抽象裡，HTML 還是那個會先到使用者眼前的東西。

不過框架的 server 層方便歸方便，邊界還是得自己守。SvelteKit 能跑 server load、能開 endpoint，但這是能力，不是叫你把對外部服務的認證、服務間的信任邊界、獨立的 rate limiting 全塞進去。面向瀏覽器的資料聚合放這層很合理，面向後端的風險邏輯該往獨立服務丟。框架能做不等於應該讓框架做，這兩個問題永遠分開問，不然六個月後沒人說得清那段 auth 到底跑在哪。

## 把幾條線收在一起

我在其他工具上也用同樣的準則：保留對 DOM 的直覺，讓 HTML 描述結構，server 邊界則另外畫清楚。Svelte 剛好同時符合這三點，程式碼通常也跟瀏覽器實際執行的事比較接近。

但話說回來，Svelte 只是一個樣本。它示範了「現代框架也可以不那麼 over-engineering」這件事是做得到的，可你真正要帶走的是那幾條原則本身。哪天有別的框架同樣尊重這些，照樣值得看。鏡子的用途是照出自己哪裡歪了，不是讓你對著鏡子拜。


## 補充筆記

- Svelte 5 runes 把響應式寫成顯式 primitive，少一層 virtual DOM，寫起來接近「標記加狀態」，離真正發生的事更近。
- SvelteKit 預設 SSR 加 form actions 漸進增強，沒 JS 也能用，是「HTML 主角、JS 補行為」的標準姿勢。
- 框架 server 層能跑邏輯是能力不是授權，面向後端的風險邏輯該往獨立服務丟，邊界自己守。
- Svelte 同時尊重 DOM 直覺、HTML-first、server 邊界三條線，所以讀起來順，順的是原則不是品牌。
- 把 Svelte 當參考實作就好，要帶走的是那幾條原則，不是對著框架拜。
> 想法與技術判斷出自 Sheng，和 Claude 一起起草 · 列入 20260613 blog 翻新計劃，新漆未乾。