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。 - 更新：不再維護此行。