SvelteKit 1.0 正式發布：新一代 Web 應用程式建構方式

2022-12-01 4 分鐘

SvelteKit 1.0 來了！

2022 年 12 月，Svelte 團隊正式宣布 SvelteKit 1.0 版本發布。對於 Svelte 社群乃至整個前端領域來說，這都是一個里程碑式的事件。SvelteKit 不再僅僅是一個「Svelte 版的 Next.js 或 Nuxt.js」，它帶著自己獨特的設計哲學，旨在提供一種更簡單、更靈活、效能更高的 Web 應用程式建構方式。

什麼是 SvelteKit？

如果你熟悉 Svelte，你可能知道 Svelte 本身是一個元件框架。它透過一個激進的編譯器，在建置時將你的 .svelte 檔案轉換為高效的命令式 JavaScript 程式碼，從而實現了驚人的效能和極小的執行期開銷。

而 SvelteKit 則是建立在 Svelte 之上的應用程式框架。它為你處理了建構一個完整應用程式所需的一切：路由、伺服器端渲染（SSR）、資料載入、部署適配等等，讓你能專注於業務邏輯的開發。

核心特性一覽

1. 檔案系統路由（Filesystem-based Routing）

和 Next.js 類似，SvelteKit 的路由是基於你的檔案系統結構自動產生的。src/routes 目錄下的檔案結構直接映射為應用程式的 URL。

src/routes/+page.svelte -> /
src/routes/about/+page.svelte -> /about
src/routes/blog/[slug]/+page.svelte -> /blog/some-post

這種慣例優於設定的方式極大地簡化了路由管理。

2. 靈活的渲染模式

SvelteKit 讓你可以在頁面層級精確控制渲染方式。無論是伺服器端渲染（SSR）、靜態網站產生（SSG），還是兩者的混合，都可以在同一個應用程式中實現。你甚至可以為單個頁面關閉 SSR，將其變為一個純粹的客戶端單頁應用程式（SPA）。

3. 通用的 `load` 函式

SvelteKit 統一了資料載入的模式。在每個頁面（或版面配置）的同層目錄下，你可以建立一個 +page.js 或 +page.server.js 檔案，並匯出一個 load 函式。

+page.js 中的 load 函式同時在伺服器端和客戶端執行。
+page.server.js 中的 load 函式僅在伺服器端執行，你可以在這裡安全地存取資料庫或私人 API。

load 函式回傳的資料會自動傳遞給對應的 +page.svelte 元件。

// src/routes/blog/[slug]/+page.server.js
import * as db from '$lib/server/database';

export async function load({ params }) {
  const post = await db.getPost(params.slug);
  return { post };
}

4. 適配器（Adapters）

「一次撰寫，隨處部署」是 SvelteKit 的核心承諾之一。透過適配器，SvelteKit 可以將你的應用程式打包成適用於任何目標平台的格式。

@sveltejs/adapter-node: 用於部署到傳統的 Node.js 伺服器。
@sveltejs/adapter-vercel: 適配 Vercel 平台。
@sveltejs/adapter-static: 將整個應用程式預先渲染為靜態檔案，適用於任何靜態主機。
還有更多適用於 Netlify、Cloudflare Workers 等平台的官方和社群適配器。

結論

SvelteKit 1.0 的發布，標誌著 Svelte 生態的成熟。它將 Svelte 編譯器的極致效能與一個經過深思熟慮的應用程式框架相結合，為開發者提供了一個強大而愉悅的開發體驗。如果你正在尋找一個能夠建構從簡單靜態頁面到複雜動態應用程式的全能型框架，SvelteKit 絕對值得一試。