svelte vs next下载svelte vs next源代码下载

svelte vs next

Ai源码

1.0.0

下载

Sveltekit vs nextjs

Sveltekit vs NextJ中的主要功能的比较。

目标：快速，轻松，惯例上的构型和电池。压倒性的选择是不好的，而提供了明确的前进道路。

	Sveltekit	nextjs	优胜者	笔记
ui lib	苗条	反应（或百万j或预先反应）	Sveltekit	Svelte提供更快的DOM更新，较小的KB客户端大小，更容易的跨组件状态管理，将响应式状态抽象到外部文件等的能力等。Svelte5具有符文（信号）？，React还没有等效。
开发人员：热重新加载	？	？	- -	即自动重新加载文件保存。
开发人员：o（1）热重载	？ Vite	？？ turbopack（*默认未启用）	Sveltekit	IE仅处理更改的文件。即使在大型项目中也快。 *更新`package.json`启用turbopack： `"dev": "next dev --turbo"` 。
开发人员：“快速刷新”	？？（默认未启用）	？	nextjs	IE UI状态保存在跨重新加载。
开发：写现代JS	？	？	- -
开发人员：A11Y控制台提示	？		Sveltekit
开发人员：更漂亮	？	？	- -	对于`.svelte`或`.jsx`文件。对于Sveltekit，请安装`Svelte for VSCode`扩展。
产品：邦德勒	？	？	- -	例如缩小资产等。默认情况下启用两者。当Rolldown（Rust）在2024年准备就绪时，Svelte将能够从Rollup+Esbuild切换到Rolldown，以更快地生产。
产品：自动代码拆分，每条路线	？	？	- -	IE自动代码分配JS＆CSS按路线和捆绑适当。
产品：为不同主机构建适配器	？		Sveltekit	Sveltekit为许多主机提供了简单的便携性。 NextJS与Vercel效果最好。
KB大小：你好世界	？ 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使用Sveltekit 1.23＆Svelte 4更新了2023年8月25日。 - NextJS使用App Router，NextJS 13.4.19和React 18.2.0更新了2023年8月25日。 - 两项测试都返回`<p>hello world</p>`的HTML，并排除了CSS。
KB大小：“现实世界”应用	太过时了	太过时了	- -	过时；欢迎PR。 *2021年3月13日https://realworld.svelte.dev/，https：//svelte.dev/blog/sapper-towards-towards-the--web-app-framework
渲染：SSR，每路	？	？	- -	IE在运行时渲染的服务器端。
渲染：流	？	？	- -	IE服务器在服务器上呈现时发送HTTP流，而不是在发送响应之前等待完整的渲染完成。
渲染：静态，每条路线	？	？	- -	即在构建时间生成的静态HTML。
渲染：增量静态再生，每条路线	？在非边缘Vercel上	？在非边缘Vercel上	- -	生产中的静态“按需” - 首先请求动态，然后缓存为静态。对于其他运行时间（例如Vercel＆Cloudflare上的Edge），请考虑将路由的`cache-control`标头设置为使用`stale-while-revalidate`以获得一些类似的好处。
渲染：“部分预先启动”		??*	nextjs	*“实验性”，在NextJS V14或更新。允许在页面 +流动动态区域（例如标头，购物车状态等中的用户验证按钮等）进行静态预定器。
标题：S-Max-age＆max-age，每路	？	？	- -
路线：基于文件的路由	？	？	- -	为简单起见。应包括其他路由公用事业。
路线：“水疗模式”	？	？	- -	SSR用于初始页面加载，然后用于以后页面的客户端路由。
路线：链接悬停在链接上的预先提取JS/CSS	？	？下一个/链接	Sveltekit	默认情况下，Sveltekit中可以被覆盖或删除。 Svelte还提供了`preloadCode()`和`prefetchData()`以预加载通过Regex指定的所有或某些路线 - 功能！ NextJS需要使用其链接组件；见文档。
内置：元数据	？	？下一个/头	- -	放置在`<svelte:head>...</svelte:head>`中。
内置：国家管理	？苗条/商店	？美国	Sveltekit	理想是一种简单的内置方式。 React具有`useState` ，Zustand等。 Svelte4使用反应性vars和商店。 SVELTE5带来了比React（由于基于信号）以及在模板文件（例如`.svelte` ）和支持文件（例如`.svelte.ts` ）内使用反应性的能力，从而提供了比React更好的DX，更好的状态更新性能，更高的状态更新性能，启用了新的方法来重构和抽象的代码。 Svelte继续赢得州管理的胜利。
内置：动画	？苗条/动画		Sveltekit	REACT存在第三方选项，但它们并不那么容易使用。 FramerMotion在React方面很受欢迎。 Motion One也是一个很棒的库（小而快速），可与任何UI框架一起使用。
内置：图像优化	？增强：IMG（beta）	？下一个/图像	- -	构建时间图像优化（转换为AVIF或WEBP），创建带后备的图片元素，缩回到JPEG或PNG，调整大小，自动添加宽度和高度，添加文件名Hash以缓存等等。
内置：表格	？形式的动作和`use:enhance` （有或不使用JS）或者 formnap（建立在超级形式）或者超级形式	？ NextJS 13表格和服务器操作（如果正确构建，则使用或不使用JS）	- -	Svelte具有内置的形式支持，即使没有JS，也可以进行逐步增强。它们非常干净，因为验证规则一次定义一次，并用于客户端和服务器端。 Formik（用于React）很干净，但需要JS和在服务器端重复验证规则；类似于Felte（用于React，Sveltekit和Vue）。
auth	？ Auth.js或Lucia	？ Auth.js或Lucia	- -	auth.js（formy nextauth.js）是nextjs的Defatso标准；便于使用;电子邮件，社交和/或一键式链接。它也支持Sveltekit。原始公告。但是，卢西亚在Sveltekit社区非常受欢迎。 -thecopenhagenbook.com（露西亚（Lucia）的作者免费）可能会有助于学习如何设置Auth，以实现这两个框架。
OG图像生成	？ @Ethercorps/sveltekit-og*	？ @vercel/og	nextjs	`@ethercorps/sveltekit-og`基于satori， `@vercel/og`也基于。在`@ethercorps/sveltekit-og`上，因为不在CloudFlare页面等某些主机上工作。归功于Vercel创建Satori。两者都包括parwindcss的支持。有人有机会为Sveltekit贡献OG Lib！*
站点地图	？超级站点地图	？隔壁的	- -	Super Sitemap赢得了易用性，并且可以使用最新的SiteMap惯例，但都可以完成工作。披露：我是Super Sitemap的作者。 github在Sveltekit官方SiteMap.xml支持。
数据获取	？ Tanstack查询？ SSWR ？ trpc	？ Tanstack查询？ SWR ？ trpc	- -	轻松获取/isloading/errors/缓存。 Sveltekit提供了自动类型的安全性（请参阅“代码示例”下的注释），这要归功于其自动化`$types`模块，而没有开发部位的工作。
尾风CSS兼容	？（或通过Svelte-Add）	？	NextJS B/C内置。两者都很容易。	对于NextJS，只需在使用Create-Next-App创建NextJS应用程序时，只需检查tailwindcss选项`Yes` 。 Tailwind V4将使设置更容易。
UI组件libs-风格	- ？ Shadcn Svelte（非官方）* - ？流利苗条 - ？骨架UI - ？碳成分很苗条	- ？ shadcn ui ** - ？尾风UI - ？ Mui - ？蚂蚁设计 - ？ Mantine UI - ？脉轮UI - ？ Flowbite反应	nextjs	- 建立在Bitsui（类似于Radixui）上，该bitsui本身是建立在Meltui上的 - *建立在radixui上。
UI组件LIB-未风格	- ？位ui* - ？融化UI ** - ?? Svelte-Headlessui（非官方；官方支持的问题：1，2）	- ？ radix ui - ？无头UI - ？反应咏叹调	nextjs	未式的UI组件（下拉，滑块，切换等）。 - 建立在Meltui上，以提供更熟悉的组件接口。 - * Melt UI是Radix-Svelte的继任者。
文档	10/10	10/10	- -
组件目录	sveltesociety.dev/components（添加您的）	- -
Dev保留（享受代理； Svelte vs React）	90％	83％	苗条	*来源：JS 2022的前端框架“保留”
哲学	宗旨	？	N/A。	“人们之所以使用Svelte，是因为他们喜欢Svelte。他们喜欢它，因为它与他们的美学敏感性保持一致。我们并没有努力成为最快，最小或最重要的，而是明确的目标是成为最好的框架。...我们并不是要成为最受欢迎的框架，而是要成为最佳框架。” ？

优先级低

以下是低优先级框架功能，因为可以通过托管提供商或其他常见工具（例如分析）轻松启用它们，或者出现了其他最佳实践，例如使用基于实用性的样式框架。

	Svelte套件	nextjs	优胜者	笔记
内置：CSS范围	？	？	Sveltekit	Svelte是自动的。 NextJS是通过JSX中的CSS模块或CSS（不那么干净）。如果您使用parwindcss，则无关紧要。移至“低优先级” b/c现在是使用基于实用性的样式框架（例如tailwindcss或unocs）来合并和共享组件的标准。
产品：HTTP早期提示JS/CSS的响应**			两者都不	**不再是超级相关的作为框架功能，因为通过某些托管平台提供商可以轻松启用。替换HTTP2服务器推送。发送两个答复：1。）103响应状态，标头将资源列出给预加载和预连接； 2.）标准200响应状态或类似。（CloudFlare可以自动对此进行此操作。）
Web Vitals报告**		？	nextjs	**不再是超级相关的作为框架功能，因为现在或通过某些托管平台提供商可以轻松地通过分析片段添加。 CloudLfare站点分析提供了核心Web Vitals Tracking，其配置为零；这是他们JS片段的一部分。如果使用NextJS或NUXTJS，Vercel还提供了它，并且具有出色的仪表板。
仅CSS的组件libs（即没有JS）不推荐使用	- ？ daisyui - ？无头UI*	？ daisyui	- -	不推荐使用B/C，某些组件需要JavaScript并添加您自己的JS并实现可访问性很难；更好的方法是从可访问的，启用JS的UI组件lib开始，该框架具有不错的默认样式，并允许您的喜好样式（例如SHADCN）。 -Daisyui提供的主题可以是通过TailWindCSS课程定制的，或使用Tailwind的`@apply`指令进行更改。仅CSS的组件要求开发人员与JS添加可访问的交互 - 很多工作。 - * Leadless UI是一种带有正式React和Vue支持的付费产品；可以用作Sveltekit的HTML＆CSS，但没有JS。 - 更新：不再维护此行。