svelte vs next

Sveltekit vs Nextjs

Sveltekit vs Nextjs의 주요 기능 비교.

목표 : 구성에 대한 빠르고 쉬운 컨벤션 및 배터리 포함. 압도적 인 선택은 명확한 길을 제공하는 것보다 나쁘다.

	Sveltekit	다음 JS	우승자	메모
ui lib	날씬한	반응 (또는 백만 주 또는 preact)	Sveltekit	Svelte는 더 빠른 DOM 업데이트, 더 작은 KB 클라이언트 크기, 훨씬 쉽게 교차 구성 요소 상태 관리, 응답 상태를 외부 파일로 추상화 할 수있는 능력 등을 제공합니다. Svelte5에는 룬 (신호)이 있습니까? 반응은 아직 동등하지 않습니다.
DEV : 핫 재 장전	?	?	-	즉, 파일 저장에 자동 재장로드.
DEV : O (1) 핫 리로드	? vite	? ? Turbopack (*기본적으로 활성화되지 않음)	Sveltekit	IE는 변경된 파일 만 처리합니다. 큰 프로젝트에서도 빠릅니다. *TurboPack을 활성화하려면 package.json 업데이트하십시오. "dev": "next dev --turbo" .
Dev : "Fast Refresh"	? ? (기본적으로 활성화되지 않음)	?	다음 JS	즉 UI 상태는 재 장전을 가로 질러 보존되었습니다.
DEV : 현대 JS를 작성하십시오	?	?	-
DEV : A11Y 콘솔 힌트	?		Sveltekit
DEV : 더 예쁘다	?	?	-	.svelte 또는 .jsx 파일의 경우. Sveltekit의 경우 Svelte for VSCode 설치하십시오.
Prod : Bundler	?	?	-	예를 들어 자산을 최소화합니다. 둘 다 기본적으로 활성화됩니다. 2024 년에 Rolldown (Rust)이 준비되면 Svelte는 롤업+esbuild에서 롤 다운으로 전환 할 수 있습니다.
prod : 경로 당 자동 코드 분할	?	?	-	IE 자동 코드 분할 경로 및 번들 당 JS 및 CSS 분할 적절한.
Prod : 다른 호스트를위한 어댑터를 빌드하십시오	?		Sveltekit	Sveltekit은 많은 호스트에게 쉬운 휴대 성을 제공합니다. Nextjs는 Vercel과 가장 잘 작동합니다.
KB 크기 : 안녕하세요 월드	? CSR이있는 46.3 (25.6 GZIP)* ? CSR이없는 2.9 (3.3 GZIP) (1.8KB는 Favicon입니다. 크롬의 GZIP로 더 큰 쇼)	336.3 (131.3 GZIP) (9.7KB Favicon 포함?)*	Sveltekit	- *CSR은 "클라이언트 측 라우터"입니다. -Sveltekit는 Sveltekit 1.23 & Svelte 4를 사용하여 2023 년 8 월 25 일 업데이트되었습니다. -Nextjs는 2023 년 8 월 25 일 앱 라우터, 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-pramwork
렌더링 : 경로 당 SSR	?	?	-	IE 서버 측면 렌더링 시간에 렌더링됩니다.
렌더링 : 스트리밍	?	?	-	IE 서버는 응답을 보내기 전에 전체 렌더링이 완료되기를 기다리지 않고 서버에서 렌더링 된 HTTP 스트림을 보냅니다.
렌더링 : 경로 별 정적	?	?	-	즉, 빌드 타임에 생성 된 정적 HTML.
렌더링 : 경로 당 증분 정적 재생	? 비 edgre vercel에서	? 비 edgre vercel에서	-	생산에서 정적 '주문형' - 첫 번째 요청 동적을 요청한 다음 정적으로 캐싱됩니다. 다른 runtimes (Vercel & CloudFlare의 Edge와 같은)의 경우, 비슷한 이점을 stale-while-revalidate 위해 Route의 cache-control 헤더를 설정하는 것을 고려하십시오.
렌더링 : "부분 사전 렌더링"		??**	다음 JS	*Nextjs v14 또는 새로에서 "실험적". PAGE + 스트리밍 스트리밍 동적 영역, 헤더의 사용자 인증 버튼, 쇼핑 카트 상태 등의 정적 사전을 허용합니다.
헤더 : 경로 당 S-Max-AGE 및 MAX-AGE	?	?	-
경로 : 파일 기반 라우팅	?	?	-	단순성을 위해. 다른 라우팅 유틸리티가 포함되어야합니다.
경로 : "스파 모드"	?	?	-	초기 페이지로드의 경우 SSR, 후속 페이지의 클라이언트 측 라우팅.
경로 : 링크 호버의 사전 가져 오기 JS/CSS	?	? 다음/링크	Sveltekit	Sveltekit에서 기본적으로 재정의 또는 제거 할 수 있습니다. Svelte는 또한 REGEX를 통해 지정된 전부 또는 일부 경로를 전제로로드하기 위해 preloadCode() 및 prefetchData() 제공합니다. 다음 JS는 링크 구성 요소를 사용해야합니다. 문서를 참조하십시오.
내장 : 메타 데이터	?	? 다음/머리	-	<svelte:head>...</svelte:head> 내에 배치하십시오.
내장 : 국가 관리	? Svelte/Store	? usestate	Sveltekit	이상은 하나의 쉽고 내장 된 방법입니다. React는 useState , Zustand 및 기타를 가지고 있습니다. Svelte4는 반응 Vars와 상점을 사용합니다. Svelte5는 더 나은 DX (신호 기반으로 인해)보다 더 나은 DX, 더 나은 상태 업데이트 성능 및 템플릿 파일 (예 : .svelte ) 및 지원 파일 (예 : .svelte.ts )을 사용하는 능력을 제공하여 코드를 리팩터링하고 추상화하는 새로운 방법을 가능하게합니다. Svelte는 주 경영진에서 계속 승리합니다.
내장 : 애니메이션	? Svelte/Animate		Sveltekit	반응을 위해서는 제 3 자 옵션이 존재하지만 사용하기 쉽지는 않습니다. Framermotion은 React에 인기가 있습니다. Motion One은 또한 훌륭한 라이브러리 (Small & Fast)이며 모든 UI 프레임 워크와 함께 작동합니다.
내장 : 이미지 최적화	? 향상 : IMG (베타)	? 다음/이미지	-	빌드 타임 이미지 최적화 (AVIF 또는 Webp 로의 변환), JPEG 또는 PNG 로의 폴백으로 그림 요소 생성, 크기 조정, 폭과 높이 추가, 자동으로 파일 이름 해시 추가 등의 호스팅 서비스가 런타임 (CloudFlare 이미지, 클라우드, 껌 등)을 선호하는 경우에도 존재합니다.
내장 : 양식	? 양식 작업 및 use:enhance (JS와의 유무에 관계없이 작동) 또는 Formsnap (슈퍼 포름에 구축) 또는 슈퍼 포름	? Nextjs 13 양식 및 서버 작업 (제대로 구축 된 경우 JS와 유무에 관계없이 작동)	-	Svelte는 JS 없이도 작동하는 점진적인 향상을 통해 내장 된 형태 지원을 제공합니다. 유효성 검사 규칙이 한 번 정의되어 클라이언트 및 서버 측 모두에 사용되기 때문에 매우 깨끗합니다. Formik (React의 경우)은 깨끗하지만 JS와 서버 측에서 유효성 검사 규칙의 복제가 필요합니다. Felte와 유사합니다 (React, Sveltekit, & vue).
인증	? Auth.js 또는 Lucia	? Auth.js 또는 Lucia	-	Auth.js (Formely Nextauth.js)는 Nextjs의 Defacto 표준입니다. 사용하기 쉬운; 이메일, 소셜 및/또는 원 클릭 링크. Sveltekit도 지원합니다. 원래 발표. 그러나 Lucia는 Sveltekit 커뮤니티에서 매우 인기가 있습니다. -thecopenhagenbook.com (Lucia의 저자가 무료)은 Framework 중 어느 쪽이든 Auth를 설정하는 방법을 배우는 데 도움이 될 수 있습니다.
OG 이미지 생성	? @ethercorps/sveltekit-og*	? @vercel/og	다음 JS	@ethercorps/sveltekit-og @vercel/og 도 기반으로하는 satori를 기반으로합니다. * on @ethercorps/sveltekit-og 's는 CloudFlare 페이지와 같은 특정 호스트에서 작업하지 않기 때문입니다. Satori를 만드는 것에 대한 Vercel에게 신용. 둘 다 Tailwindcss 지원이 포함됩니다. Sveltekit에게 누군가가 OG Lib에 기여할 수있는 기회!
사이트 맵	? 슈퍼 사이트 맵	? 차세대 맵	-	Super Sitemap은 Siteemap의 사용 편의성과 최신의 예상 대회에서 승리하지만 둘 다 작업을 완료합니다. 공개 : 저는 Super Siteemap의 저자입니다. Sveltekit의 공식 SiteMap.xml 지원에 대한 Github 문제.
데이터 가져 오기	? Tanstack 쿼리 ? SSWR ? trpc	? Tanstack 쿼리 ? SWR ? trpc	-	쉬운 가져 오기/isloading/errors/caching. Sveltekit은 자동 생성 된 $types 모듈 덕분에로드 기능에서 반환 된 데이터에 대한 자동 유형 안전 (코드 샘플 아래 참조)을 제공합니다.
테일 윈드 CSS 호환	? (또는 svelte-add를 통해)	?	다음 JS B/C 내장. 둘 다 쉽습니다.	NextJS의 경우 Create-Next-App을 사용하여 NextJS 앱을 작성할 때 TailWindcss 옵션에 대해 Yes 확인하십시오. Tailwind V4는 더 쉽게 설정할 수 있습니다.
UI 구성 요소 LIB- 스타일	-? Shadcn Svelte (비공식)* -? flowbite svelte -? 골격 ui -? 탄소 구성 요소 Svelte	-? Shadcn ui ** -? 꼬리 바람 UI -? 무이 -? 개미 디자인 -? Mantine UI -? 차크라 UI -? Flowbite 반응	다음 JS	- *Bitsui (radixui와 유사)에 건축 된 자체는 Meltui에 구축되었습니다. - ** Radixui에 구축.
UI 구성 요소 Libs- 스타일링되지 않습니다	-? 비트 UI* -? kelt ui ** - ??? svelte-headlessui (비공식; 공식 지원을위한 문제 : 1, 2)	-? Radix UI -? 헤드리스 UI -? 반응 아리아	다음 JS	스타일이없는 UI 구성 요소 (드롭 다운, 슬라이더, 토글 등). -*더 친숙한 구성 요소 인터페이스를 제공하기 위해 Meltui에 구축되었습니다. - ** Melt UI는 Radix-Svelte의 후임자입니다.
문서	10/10	10/10	-
구성 요소 디렉토리	sveltesociety.dev/components (당신의 추가)	-
개발자 보유 (즐거움을위한 프록시; Svelte vs React)	90%	83%	날씬한	*출처 : JS 상태 2022 프론트 엔드 프레임 워크 '보존'
철학	교리	?	N/A	"사람들은 svelte를 좋아하기 때문에 svelte를 사용합니다. 그들은 미적 감수성과 일치하기 때문에 그것을 좋아합니다. 가장 빠르거나 작거나 가장 좋은 것이 아니라 최고의 분위기를 가진 프레임 워크가되는 것을 목표로하고 있습니다. ... 우리는 가장 인기있는 프레임 워크가 되려고 노력하지 않습니다." ?

우선 순위가 낮습니다

다음은 호스팅 제공 업체 또는 기타 공통 도구 (예 : 분석)를 통해 쉽게 활성화 할 수 있으므로 우선 순위가 낮거나 유틸리티 기반 스타일 프레임 워크를 사용하는 것과 같이 다른 모범 사례가 나타났습니다.

	벨트 키트	다음 JS	우승자	메모
내장 : CSS 스코핑	?	?	Sveltekit	Svelte 's는 자동입니다. Nextjs '는 JSX의 CSS 모듈 또는 CSS를 통해입니다 (깨끗하지 않음). Tailwindcss를 사용하는 경우 관련이 없습니다. "낮은 우선 순위"B/C로 이동 한 구성 요소의 합성 및 공유를 위해 Tailwindcss 또는 Unocss와 같은 유틸리티 기반 스타일 프레임 워크를 사용하는 것이 표준입니다.
Prod : HTTP 초기 힌트 JS/CSS **			어느 것도 아니다	** 일부 호스팅 플랫폼 제공 업체를 통해 쉽게 활성화하기 때문에 더 이상 프레임 워크 기능으로 매우 관련이 없습니다. HTTP2 서버 푸시를 대체합니다. 두 가지 응답을 보냅니다. 1.) Preload & preconnect에 리소스를 나열하는 헤더가있는 103 응답 상태; 2.) 표준 200 응답 상태 또는 이와 유사합니다. (CloudFlare는 사이트를 자동으로 할 수 있습니다.)
웹 생명보고 **		?	다음 JS	** 분석 스 니펫을 통해 또는 일부 호스팅 플랫폼 제공 업체를 통해 쉽게 추가하기 때문에 더 이상 프레임 워크 기능으로 매우 관련이 없습니다. CloudLfare 사이트 분석은 구성 제로 구성으로 핵심 웹 생명 추적을 제공합니다. JS 스 니펫의 일부입니다. Vercel은 Nextjs 또는 Nuxtjs를 사용하고 대시 보드를 사용하는 경우도 제공합니다.
CSS 전용 구성 요소 LIBS (즉, JS) * 범주 적으로 권장되지 않습니다 *	-? Daisyui -? 헤드리스 UI*	? Daisyui	-	*범주 적으로 권장 하지 않는 B/C 일부 구성 요소는 JavaScript가 필요 하며 자신의 JS를 추가하고 접근성을 달성하는 것은 어렵습니다. 더 나은 접근 방식은 멋진 기본 스타일과 함께 제공되고 선호도 (예 : Shadcn)에 스타일링을 허용하는 프레임 워크를위한 접근 가능한 JS 지원 UI 구성 요소 LIB로 시작하는 것입니다. -Daisyui는 Tailwindcss 클래스로 일회성 사용자 정의 할 수있는 테마를 제공하거나 Tailwind의 @apply Directive를 사용하여 변경되었습니다. CSS 전용 구성 요소는 DEV가 JS와의 액세스 가능한 상호 작용을 추가하려면 많은 작업입니다. - ** Headless UI는 공식 RECT 및 VUE 지원이있는 유료 제품입니다. Sveltekit과 함께 HTML & CSS로 사용할 수 있지만 JS는 없습니다. - 업데이트 : 더 이상이 행을 유지하지 않습니다.

다음 JS의 광범위한 생태계로 인해 다음 JS Blitz JS 위에 구축 된 프레임 워크도 명예로운 언급입니다. 다음 JS가 기본적으로 인증 메커니즘 등을 지원하지 않는 기능이 제공됩니다. 중간 크기 또는 대형 프로젝트에 적합합니다. 또한 Blitz JS를 사용하면서 다음 JS 지식을 활용할 수 있습니다.