棄用 Next.js#

總而言之 Next.js 的能力十分強大但我們的產品好像不需要那麼複雜的功能，導致就算想要繼續使用 React 我們也一定不會選擇 Next.js ，主要是我們不需要 App Router 、不需要 Server Actions、比起 webpack 我們更喜歡 Vite 。

因為我們對於 Next.js 已經沒有什麼好感，所以從去年年底開始的新專案我們一律不使用 Next.js ，而直到兩個月前我們才把使用 Next.js 的產品改用 Vite 重寫了。

再次說明，因為這些產品都是純粹的 SPA 所以才能簡單地用 Vite 替代。

所以在不喜歡 Next.js 加上手癢的前提下我們就不繼續使用 Next.js 了。

當然我相信 Next.js 在許多場景都還是相當好用的框架，只是對於我們來說的確不是那麼必要而已。

Svelte 好在哪#

至於 Svelte 我是看上他的「學習門檻」、「快速」以及「開發體驗」

畢竟還是要跟同事一起合作所以「學習門檻」還是一個相當重要的指標，Svelte 的 SFC(Single file componnet) 就是讓我覺得降低門檻的一個重要特性，基本上只要會 HTML、 CSS 和 JS 就能夠快速入門了。

「快速」這件事情除了理論上的性能以外還有「打包速度」以及「開發速度」，特別是跟之前的 Next.js 專案比較起來打包速度體感上快了不只一點。

我們沒有使用過 turbopack ，所以現在 Next.js 打包進步多少我就不清楚了。

所以我自己非常主觀的想法是 Svelte 不用刻意寫就可以寫出效能不會太爛的程式碼但 React 通常要刻意寫才能寫出效能還可以的程式碼。這部分就是得益於 Svelte 5 的 fine-grained reactivity 設計，每次狀態更新後重新渲染的部分只會是跟該狀態相關的部分，不會是整個 component 。

Svelte 的設計也讓「開發體驗」變得十分舒服，像是以下的程式碼

<script>
 let state = $state(0)
</script>

<button onclick={()=>state +=1}> +1 </button>
<input type="range" bind:value={state} min="0" max="100" />
<button onclick={()=>state -=1}> -1 </button>

<div>
 state: {state}
</div>

在 state 的使用上我們只要使用 $state rune 來宣告 state 它就能擁有 reactivity ，要更新只要直接去改變它的值就好不需要透過 setState 之類的 function。

以及 Svelte 中最吸引我的 bind:value directive，只要一行就能達成等同 React 的 controlled component 的效果，而不去額外去寫 onChange 之類的 function 然後再傳入 props 之類的事情。

在 React 中要實現同等效果的程式碼大概會是這樣，可以看出簡潔不少

import React, { useState } from "React";

function App() {
  const [state, setState] = useState(0);

  return (
    <div>
      <button onClick={() => setState((prev) => prev + 1)}>+1</button>
      <input
        type="range"
        value={state}
        onChange={(e) => setState(Number(e.target.value))}
        min="0"
        max="100"
      />
      <button onClick={() => setState((prev) => prev - 1)}>-1</button>
      <div>state: {state}</div>
    </div>
  );
}

export default App;

當然 Svelte 還有很多很多功能像是 logic block 、 animate 和 transition 等等，特別是 universal reactivity 的出現更是讓我在全域狀態管理上省心不少。

universal reactivity 簡單來說就是可以在 .svelte 以外使用 rune ，進而可以實作全域狀態管理，只要將副檔名改為 .svelte.[jt]s 就可以了。

// in progressStore.svelte.ts
interface ProgressState {
  loading: boolean;
}

const createProgressStore = () => {
  const progressState = $state<ProgressState>({ loading: false });

  const setLoading = (loading: boolean) => {
    progressState.loading = loading;
  };

  return {
    get loading() {
      return progressState.loading;
    },
    setLoading,
  };
};

export const progressStore = createProgressStore();

像是這樣我就能簡單實現一個「讀取中」的全域狀態，然後我就能在其他地方使用 progressStore.setLoading(true) 或者 progressStore.setLoading(false) 去控制這個全域狀態，像是放在自己封裝的 fetch 、 axios 之類的地方。

然後在控制 progress 的元件的地方使用progressStore.loading 就做出當整個網站有發出任何 request 就會在網頁上出現讀取條的功能。

<progress
 class="progress sticky top-3 w-full"
 class:invisible={!progressStore.loading}
 ></progress>

所以我認為如果只是要開發一個小專案，Svelte 已經可以說得上開箱即用了。

Svelte 不好在哪#

相較於 React 來說 Svelte 在各種第三方 library 的選擇是少了許多，像是「圖表」、「狀態管理」、「地圖」、「UI 框架」等等我在工作上其他專案會用到的 library，在 Svelte 就找不到相對成熟的解決方案，只是剛好目前這個專案不會用到所以我也沒太在意。

但上述 library 的缺乏也有可能是相對於 React 來說在操控 DOM 這件事情上在 Svelte 是相對自然的，所以圖表等等的功能其實也不一定需要特別封裝過後的 library 來實現。以及上面提到的 universal reactivity 也解決了一部份全域狀態的需求了。

所以只能說目前生態系狀況剛好可以滿足我的需求，只是如果換成公司內其他專案要改為使用 Svelte 我就會覺得可能就不是那麼好的選擇了。

寫法太有彈性這件事情也是讓我有一點點困擾的，像是 state 更新這件事情，在 Svelte 5 裡即使是 object 或者 array 進行 mutable update 依然能夠擁有 reactivity 。

<script>
 let state = $state({value:1})

</script>

{state.value}

<button onclick={()=>{ state.value += 1;}}>
 add state.value
</button>

以這個例子來說我只更新了 state 其中一個 property 畫面依然能夠重新渲染，這項特性雖然很方便但如果變得程式變複雜了、狀態多了，就會變的比較不好維護（相較於 React）。我的理由是「沒辦法快速找到哪裡去更新狀態」在 React 中基本上我只要去搜尋檔案中的 setState 之類 function 的通常都能夠找到哪裡去更新這個狀態。