Nevermind

SvelteKit 1.0 正式发布：新一代 Web 应用构建方式

4 min

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 绝对值得一试。

Svelte SvelteKit Framework Release