GithubSvelteKit 与 NextJS 对比
SvelteKit 与 NextJS 主要特性的比较。
目标：快速、简便、约定优于配置，以及内置功能齐全。 过多的选择是不好的，相比之下提供一个清晰的前进路径更为重要。
| SvelteKit | NextJS | 胜出者 | 备注 | |
|---|---|---|---|---|
| UI 库 | Svelte | React (或 MillionJS 或 Preact) | SvelteKit | Svelte 提供更快、更小的 DOM 更新和更小的客户端代码体积。Svelte5 有 Runes (信号) 🎉，React 目前还没有等效功能。 |
| 开发: 热重载 | 🟢 | 🟢 | -- | 即保存文件时自动重新加载。 |
| 开发: O(1) 热重载 | 🟢 Vite | 🟢 🚧 Turbopack (*默认未启用) | SvelteKit | 即只处理更改的文件。即使在大型项目中也很快。*更新 package.json 以启用 Turbopack: "dev": "next dev --turbo"。 |
| 开发: "快速刷新" | 🟢 🚧 (默认未启用) | 🟢 | NextJS | 即在重新加载时保留 UI 状态。 |
| 开发: 编写现代 JS | 🟢 | 🟢 | -- | |
| 开发: 可访问性控制台提示 | 🟢 | ❌ | SvelteKit | |
| 开发: Prettier | 🟢 | 🟢 | -- | 分别用于 .svelte 或 .jsx 文件。对于 SvelteKit，安装 Svelte for VSCode 扩展。 |
| 生产: 打包工具 | 🟢 | 🟢 | -- | 例如压缩资源等。两者都默认启用。当 RollDown (Rust) 在 2024 年准备就绪时，Svelte 将能够从 Rollup+ESbuild 切换到 RollDown，以实现更快的生产构建。 |
| 生产: 自动代码分割，按路由 | 🟢 | 🟢 | -- | 即自动按路由分割 JS 和 CSS，并适当打包。 |
| 生产: 针对不同主机的构建适配器 | 🟢 | ❌ | SvelteKit | SvelteKit 提供了轻松移植到多个主机的功能。NextJS 最适合与 Vercel 配合使用。 |
| KB 大小: Hello World | 🟢 46.3 (25.6 gzip) 带 CSR* 🟢 2.9 (3.3 gzip) 不带 CSR (其中 1.8kb 是 favicon；在 Chrome 中用 gzip 显示为更大) | ❌ 336.3 (131.3 gzip) (包括 9.7kb 的 favicon 👀)* | SvelteKit | - *CSR 是"客户端路由"。 - SvelteKit 于 2023 年 8 月 25 日更新，使用 SvelteKit 1.23 和 Svelte 4。 - NextJS 于 2023 年 8 月 25 日更新，使用 App Router、NextJS 13.4.19 和 React 18.2.0。 - 两个测试都返回 <p>hello world</p> 的 HTML，不包括 CSS。 |
| KB 大小: "真实世界"应用 | 太旧 | 太旧 | -- | 已过时；欢迎 PR。*2021 年 3 月 13 日 https://realworld.svelte.dev/，https://svelte.dev/blog/sapper-towards-the-ideal-web-app-framework |
| 渲染: SSR，按路由 | 🟢 | 🟢 | -- | 即在运行时进行服务器端渲染。 |
| 渲染: 流式传输 | 🟢 | 🟢 | -- | 即服务器在渲染时发送 HTTP 流，而不是等待完全渲染完成后再发送响应。 |
| 渲染: 静态，按路由 | 🟢 | 🟢 | -- | 即在构建时生成静态 HTML。 |
| 渲染: 增量静态再生成，按路由 | 🟢 在非边缘 Vercel 上 | 🟢 在非边缘 Vercel 上 | -- | 生产环境中的"按需"静态 - 即第一个请求是动态的，然后缓存为静态。对于其他运行时（如 Vercel 和 Cloudflare 上的 Edge），考虑将路由的 cache-control 头设置为使用 stale-while-revalidate 以获得类似的好处。 |
| 渲染: "部分预渲染" | ❌ | 🟢🚧* | NextJS | *"实验性"，在 NextJS v14 或更新版本中。 允许页面的静态预渲染 + 动态区域的流式传输，如页眉中的用户身份验证按钮、购物车状态等。 |
| 头部: s-max-age 和 max-age，按路由 | 🟢 | 🟢 | -- | |
| 路由: 基于文件的路由 | 🟢 | 🟢 | -- | 为简单起见。应包含其他路由实用程序。 |
| 路由: "SPA 模式" | 🟢 | 🟢 | -- | 初始页面加载时使用 SSR，然后后续页面使用客户端路由。 |
| 路由: 链接悬停时预取 JS/CSS | 🟢 | [🟢 next/link](https://nextjs.org/ | ||
| Tailwind CSS 兼容 | 🟢（或通过svelte-add） | 🟢 | NextJS，因为内置。两者都很简单。 | 对于NextJS，使用create-next-app创建NextJS应用时，只需选择TailwindCSS选项即可。 Tailwind v4将使设置更加简便。 |
| UI组件库 - 带样式 | - 🟢 Shadcn Svelte（非官方）* - 🟢 Flowbite Svelte - 🟢 Skeleton UI - 🟢 Carbon Components Svelte | - 🟢 Shadcn UI** - 🟢 Tailwind UI - 🟢 MUI - 🟢 Ant Design - 🟢 Mantine UI - 🟢 Chakra UI - 🟢 Flowbite React | NextJS | - *基于BitsUI（类似于RadixUI），而BitsUI本身基于MeltUI - **基于RadixUI。 |
| UI组件库 - 无样式 | - 🟢 Bits UI* - 🟢 Melt UI** - 🟢🚧 svelte-headlessui（非官方；官方支持问题：1, 2） | - 🟢 Radix UI - 🟢 Headless UI - 🟢 React Aria | NextJS | 无样式UI组件（下拉菜单、滑块、开关等）。 -*基于MeltUI，提供更熟悉的组件接口。 - **Melt UI是radix-svelte的继任者。 |
| Tailwind CSS组件库（即无JS） *不推荐仅CSS组件库 | - 🟢 DaisyUI -🟢❌ Headless UI* | 🟢 DaisyUI | -- | *绝对不推荐，因为某些组件_需要_JavaScript，添加自己的JS并实现可访问性很困难；更好的方法是从一个可访问的、支持JS的UI组件库开始，该库为你的框架提供良好的默认样式，并允许根据偏好进行样式定制（例如Shadcn）。 - DaisyUI提供可以通过TailwindCSS类一次性定制或使用Tailwind的 @apply指令修改的主题。仅CSS组件要求开发者使用JS添加可访问的交互—这需要大量工作。- **Headless UI是一个付费产品，官方支持React和Vue；可以在SvelteKit中使用HTML和CSS，但不支持JS。 - 更新：不再维护此行。 |
| 文档 | 10/10 | 10/10 | -- | |
| 组件目录 | sveltesociety.dev/components（添加你的组件） | -- | ||
| 开发者保留率（愉悦度代理；Svelte vs React） | 90% | 83% | Svelte | *来源：2022年JavaScript现状前端框架'保留率' |
| 理念 | 原则 | ? | 不适用 | "人们使用Svelte是因为他们喜欢Svelte。他们喜欢它是因为它符合他们的审美感受。我们不是努力成为最快或最小或最什么的，我们明确地旨在成为氛围最好的框架。...我们不是试图成为最流行的框架，我们是试图成为最好的框架。"🤘 |
低优先级
以下是低优先级的框架功能，因为它们可以通过托管提供商或其他常用工具（如分析工具）轻松启用。
| Svelte Kit | NextJS | 胜出方 | 备注 | |
|---|---|---|---|---|
| 生产环境：JS/CSS的HTTP早期提示响应** | ❌ | ❌ | 无 | **作为框架功能已不太相关，因为可通过某些托管平台提供商轻松启用。**替代HTTP2服务器推送。发送两个响应：1）状态码103的响应，头部列出需要预加载和预连接的资源；2）标准200响应状态或类似。（Cloudflare可以为网站自动执行此操作。） |
| Web核心指标报告** | ❌ | 🟢 | NextJS | 作为框架功能已不太相关，因为现在可以通过分析代码片段或某些托管平台提供商轻松添加。Cloudflare站点分析提供零配置的核心Web指标跟踪；这是他们JS代码片段的一部分。Vercel在使用NextJS或NuxtJS时也提供此功能，并有一个出色的仪表板。 |
由于Next JS生态系统广泛，基于Next JS构建的框架Blitz JS也值得一提。它具有Next JS原生不支持的功能，如身份验证机制等。适用于中型或大型项目。而且，在使用Blitz JS时，你可以利用你的Next JS知识。
