SvelteKit 与 NextJS 对比

SvelteKit 与 NextJS 主要特性的比较。

目标：快速、简便、约定优于配置，以及内置功能齐全。过多的选择是不好的，相比之下提供一个清晰的前进路径更为重要。

	SvelteKit	NextJS	胜出者	备注
UI 库	Svelte	React<br>(或 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*<br>🟢 2.9 (3.3 gzip) 不带 CSR (其中 1.8kb 是 favicon；在 Chrome 中用 gzip 显示为更大)	❌ 336.3 (131.3 gzip) (包括 9.7kb 的 favicon 👀)*	SvelteKit	- *CSR 是"客户端路由"。<br>- SvelteKit 于 2023 年 8 月 25 日更新，使用 SvelteKit 1.23 和 Svelte 4。<br>- NextJS 于 2023 年 8 月 25 日更新，使用 App Router、NextJS 13.4.19 和 React 18.2.0。<br>- 两个测试都返回 `<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 或更新版本中。<br>允许页面的静态预渲染 + 动态区域的流式传输，如页眉中的用户身份验证按钮、购物车状态等。
头部: 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选项即可。<br><br>Tailwind v4将使设置更加简便。
UI组件库 - 带样式	- 🟢 Shadcn Svelte（非官方）*<br/>- 🟢 Flowbite Svelte<br/>- 🟢 Skeleton UI<br/>- 🟢 Carbon Components Svelte	- 🟢 Shadcn UI**<br>- 🟢 Tailwind UI<br>- 🟢 MUI<br>- 🟢 Ant Design<br>- 🟢 Mantine UI<br>- 🟢 Chakra UI<br>- 🟢 Flowbite React	NextJS	- 基于BitsUI（类似于RadixUI），而BitsUI本身基于MeltUI<br>- *基于RadixUI。
UI组件库 - 无样式	- 🟢 Bits UI<br>- 🟢 Melt UI*<br>- 🟢🚧 svelte-headlessui（非官方；官方支持问题：1, 2）	- 🟢 Radix UI<br>- 🟢 Headless UI<br>- 🟢 React Aria	NextJS	无样式UI组件（下拉菜单、滑块、开关等）。<br>-基于MeltUI，提供更熟悉的组件接口。<br>- *Melt UI是radix-svelte的继任者。
Tailwind CSS组件库（即无JS）<br><br>*不推荐仅CSS组件库	- 🟢 DaisyUI<br>-🟢❌ Headless UI*	🟢 DaisyUI	--	绝对不推荐，因为某些组件_需要_JavaScript，添加自己的JS并实现可访问性很困难；更好的方法是从一个可访问的、支持JS的UI组件库开始，该库为你的框架提供良好的默认样式，并允许根据偏好进行样式定制（例如Shadcn）。<br/>- DaisyUI提供可以通过TailwindCSS类一次性定制或使用Tailwind的`@apply`指令修改的主题。仅CSS组件要求开发者使用JS添加可访问的交互—这需要大量工作。<br>- *Headless UI是一个付费产品，官方支持React和Vue；可以在SvelteKit中使用HTML和CSS，但不支持JS。<br>- 更新：不再维护此行。
文档	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时也提供此功能，并有一个出色的仪表板。