svelte vs next
1.0.0
Сравнение основных функций в Sveltekit vs NextJS.
Цели: Быстрая, легкая, соглашение о конфигурации и батареи включены. Подавляющий выбор плох, а не обеспечивает четкий путь вперед.
| СВЕЛТЕКИТ | NextJs | Победитель | Примечания | |
|---|---|---|---|---|
| UI lib | Стройный | Реагировать (или миллионы или прец | СВЕЛТЕКИТ | Svelte предлагает более быстрые обновления DOM, меньший размер клиента KB, гораздо проще межкомпонентное управление состоянием, возможность абстрагировать адаптивное состояние во внешние файлы и т. Д. У Svelte5 есть руны (сигналы)?, React еще не имеет эквивалента. |
| Дев: горячая перезагрузка | ? | ? | - | Т.е. автоматическая перезагрузка при сохранении файла. |
| Dev: O (1) Горячая перезагрузка | ? Просие | ? ? TurboPack (*не включен по умолчанию) | СВЕЛТЕКИТ | Т.е. обрабатывает только измененные файлы. Быстро даже в крупных проектах. *Update package.json для включения TurboPack: "dev": "next dev --turbo" . |
| Dev: "Быстрое обновление" | ? ? (не включено по умолчанию) | ? | NextJs | Т.е. государство пользовательского интерфейса сохранилось через перезагрузку. |
| DEV: написать современный JS | ? | ? | - | |
| Dev: консоль A11y подсказки | ? | СВЕЛТЕКИТ | ||
| Дев: красивее | ? | ? | - | Для файлов .svelte или .jsx соответственно. Для SVELTEKIT установите Svelte for VSCode . |
| Prod: Bundler | ? | ? | - | Например, минимификация активов и т. Д. Оба включены по умолчанию. Когда Rolldown (Rust) будет готов в 2024 году, Svelte сможет переключиться с Rollup+Esbuild на Ролдуун для еще более быстрых производственных сборок. |
| PROD: Автокодическое расщепление, по маршруту | ? | ? | - | Т.е. автоматический код сплит JS & CSS для маршрута и комплектации соответствующим образом. |
| PROD: Построить адаптеры для разных хостов | ? | СВЕЛТЕКИТ | Sveltekit обеспечивает легкую переносимость многим хостам. NextJS лучше всего работает с Vercel. | |
| Размер кб: привет мир | ? 46,3 (25,6 GZIP) с CSR* ? 2.9 (3,3 Gzip) без CSR (1,8 КБ из этого - Favicon; показывает больше, что с Gzip в хроме) | 336.3 (131,3 Gzip) (включает в себя 9,7 КБ изыскан?)* | СВЕЛТЕКИТ | - *CSR - это «клиентский маршрутизатор». - Sveltekit обновлен 25 августа 2023 г. с использованием Sveltekit 1.23 & Svelte 4. - NextJS обновлен 25 августа 2023 г. с использованием Router App, NextJS 13.4.19, & React 18.2.0. - Оба теста возвращают HTML из <p>hello world</p> и исключают CSS. |
| Приложение KB Size: «Реальный мир» | Слишком устарел | Слишком устарел | - | Устаревший; PR Добро пожаловать. *13 марта 2021 г. |
| Рендеринг: SSR, по маршруту | ? | ? | - | Т.е. на стороне сервера визуализируется во время выполнения. |
| Рендеринг: потоковая передача | ? | ? | - | IE Server отправляет http -поток, когда он отображался на сервере, а не ожидает завершения полного рендеринга перед отправкой ответа. |
| Рендеринг: статический, по маршруту | ? | ? | - | Т.е. статический HTML, сгенерированный во время сборки. |
| Рендеринг: постепенная статическая регенерация по маршруту | ? на неподтвержденном Vercel | ? на неподтвержденном Vercel | - | Статический «по требованию» в производстве - сначала запрашивает динамику, а затем кэшируется как статический. Для других времен выполнения (например, Edge On Vercel & Cloudflare), рассмотрите возможность установить заголовок cache-control вашего маршрута, чтобы использовать stale-while-revalidate для некоторых аналогичных преимуществ. |
| Рендеринг: "частичный презринг" | ??* | NextJs | *«Экспериментальный», в NextJS V14 или новее. Позволяет статическому предварительному предварительному преобразованию динамических областей потокового потока, таких как кнопки пользователя в заголовке, статус корзины покупок и т. Д. | |
| Заголовки: S-Max-Age & Max-Age, по маршруту | ? | ? | - | |
| Маршруты: маршрутизация на основе файлов | ? | ? | - | Для простоты. Другие утилиты маршрутизации должны быть включены. |
| Маршруты: «режим спа» | ? | ? | - | SSR для начальной загрузки страницы, затем маршрутизации на стороне клиента для последующих страниц. |
| Маршруты: предварительно сгибание JS/CSS на прокат ссылки | ? | ? Следующий/ссылка | СВЕЛТЕКИТ | По умолчанию в SVELTEKIT может быть переопределен или удален. Svelte также предлагает preloadCode() и prefetchData() для предварительной загрузки всех или некоторых маршрутов, указанных через Regex-мощный! NextJS требует использования их компонента ссылки; Смотрите документы. |
| Встроенный: метаданные | ? | ? Далее/голова | - | Поместите в <svelte:head>...</svelte:head> . |
| Встроенное: государственное управление | ? стрте/магазин | ? USESTATE | СВЕЛТЕКИТ | Идеально-один, легкий, встроенный способ. React имеет useState , Zustand и другие.SVELTE4 использует реактивные VAR и магазины. SVELTE5 приносит руны (сигналы) для еще лучшего DX, лучшего обновления состояния, чем реагировать (из -за того, что он основан на .svelte ), и возможность использовать реактивность внутри файлов шаблонов ( например .svelte.ts Svelte продолжает побеждать в управлении государством. |
| Встроенный: анимация | ? СВОВАЯ/Анимат | СВЕЛТЕКИТ | Для реагирования существуют параметры третьей стороны, но они не так просты в использовании. РАЗДЕЛОВАЯ ПОЛУЧЕНА ДЛЯ React. Motion One - это также отличная библиотека (маленькая и быстрое) и работает с любыми рамками пользовательского интерфейса. | |
| Встроенный: оптимизация изображений | ? Улучшен: IMG (бета) | ? Следующее/Изображение | - | Оптимизация изображений построения времени (преобразование в AVIF или WebP), создание элемента изображения с запасным образом в JPEG или PNG, изменение размера, автоматическое добавление ширины и высоты, добавление имени файла для кэширования и т. Д. |
| Встроенные: формы | ? Форма действия и use:enhance (работает с JS или без него)или Formsnap (построен на суперформ) или Суперформ | ? NextJS 13 Форма и Действия сервера (работает с JS или без него, если он будет правильно построен) | - | Svelte обладает встроенной поддержкой формы с прогрессивным улучшением, которое работает даже без JS; Они очень чистые, потому что правила проверки определяются один раз и используются как для клиента, так и для сервера. Formik (для React) является чистым, но требует JS и дублирования правил проверки на стороне сервера; Подобно Felte (для React, Sveltekit и Vue). |
| Аут | ? Auth.js или Люсия | ? Auth.js или Люсия | - | Auth.js (с или иной nextauth.js) является стандартом Defacto для NextJS; простой в использовании; Электронная почта, социальная и/или ссылка на один щелчок. Он тоже поддерживает SVELTEKIT. Оригинальное объявление. Тем не менее, Люсия очень популярна в сообществе Sveltekit. - Thecopenhagenbook.com (бесплатно автором Люсии) может быть полезно научиться настроить Auth, для любой структуры. |
| Огнирование изображений | ? @ethercorps/sveltekit-og* | ? @vercel/og | NextJs | @ethercorps/sveltekit-og основан на Satori, на котором также основана @vercel/og .* на @ethercorps/sveltekit-og 's, потому что не работает на определенных хостах, таких как страницы CloudFlare. Кредит Vercel за создание Satori. Оба включают поддержку TailWindcss. Возможность для кого -то внести вклад OG LIB для SVELTEKIT! |
| Sitemap | ? Super Sitemap | ? Следующая сторона | - | Super SiteMap выигрывает на простоте использования и актуально ожидаемые конвенции для SiteMap, но оба выполняют работу. Раскрытие: я автор Super Sitemap. Выпуск Github для официальной поддержки SiteMap.xml в Светсе. |
| Извлечение данных | ? Танстак запрос ? SSWR ? TRPC | ? Танстак запрос ? Квадрат ? TRPC | - | Легкая выборка/iSloading/ошибки/кэширование. Sveltekit обеспечивает автоматическую безопасность типа (см. Примечание под примером кода) для данных, возвращаемых из функций нагрузки благодаря модулю автогенерируемых $types , без работы со стороны разработчика. |
| Tailwind CSS совместим | ? (или через стройный передвижение) | ? | NextJS B/C встроен. Оба просты. | Для NextJS просто проверьте Yes на опцию TailWindcss при создании приложения NextJS с помощью Create-Next-APP.Tailwind V4 будет настройкой еще проще. |
| Компоненты пользовательского интерфейса | -? Shadcn Svelte (неофициальный)* -? Flowbite Svelte -? Скелет UI -? Углеродные компоненты | -? Shadcn Ui ** -? Tailwind UI -? Мюй -? Муравей дизайн -? Мантиновый пользовательский интерфейс -? Чакра UI -? Протокол реагирует | NextJs | - *Построен на битсуи (аналогично Radixui), который сам построен на Meltui - ** Построен на Radixui. |
| Компонент пользовательского интерфейса | -? Биты ui* -? Растопить UI ** - СВЕЛТА-НЕВОБЩЕСТВЕННАЯ БЕСПЛАТНАЯ (Неофициальные; вопросы для официальной поддержки: 1, 2) | -? Radix UI -? Безголовный пользовательский интерфейс -? Реагировать арию | NextJs | Компоненты UI-стиль, выпадающие, раскрывающийся, слайдер, переключатель и т. Д.). -*Построен на Meltui, чтобы обеспечить более знакомый интерфейс компонента. - ** Постановление пользовательского интерфейса является преемником Radix-Svelte. |
| Док | 10/10 | 10/10 | - | |
| Справочник компонентов | sveltesociety.dev/components (добавить свой) | - | ||
| Удержание разработки (прокси для удовольствия; Свлаж против реагирования) | 90% | 83% | Стройный | *Источник: State of JS 2022 Фронтовые рамки «удержание» |
| Философия | Принципы | ? | n/a | «Люди используют стройку, потому что они любят стройку. Им это нравится, потому что это согласуется с их эстетическими чувствами. Вместо того, чтобы стремиться быть самым быстрым, самым маленьким или каким -либо наиболее наибольшим количеством, мы явно стремимся стать основой с лучшими вибрациями ... мы не пытаемся быть самыми популярными рамками, мы пытаемся быть лучшей рамкой». ? |
Ниже приведены функции с низким приоритетом, потому что их можно легко включить с помощью хостинговых поставщиков или других общих инструментов (например, аналитики), или другие лучшие практики появились, как использование каркасов стилей на основе утилиты.
| Стройный комплект | NextJs | Победитель | Примечания | |
|---|---|---|---|---|
| Встроенный: CSS SCOPING | ? | ? | СВЕЛТЕКИТ | СВОВАЯ АВТОМАТИЧЕСКАЯ. NextJs 'через CSS -модули или CSS в JSX (не так чистый). Неактуально, если вы используете Tailwindcss. Перейдите на «низкий приоритет», потому что теперь стандартно использовать структуру стиля на основе утилиты, такую как TailWindcss или UNOCSS для композиции и совместного использования компонентов. |
| PROD: http Ранний отклик JS/CSS ** | Ни один | ** Больше не очень релевантно в качестве фондовой функции, потому что легко включено через некоторых поставщиков платформ хостинга. Заменяет HTTP2 Server Push. Отправить два ответа: 1.) статус ответа 103 с перечислением ресурсов заголовков в Preload & Preconnect; 2.) Стандартный статус ответа 200 или аналогичный. (CloudFlare может сделать это для сайтов автоматически.) | ||
| Интернет -отчеты ** | ? | NextJs | ** Больше не очень релевантно в качестве фондовой функции, потому что легко добавляется через аналитический фрагмент сейчас или через некоторых поставщиков платформ хостинга. Analytics Cloudlfare Analytics предлагает основную отслеживание веб -жизненных веществ с нулевой конфигурацией; Это часть их фрагмента JS. Vercel также предлагает его, если использует NextJS или NuxtJS и имеет превосходную панель. | |
| Компоненты только для CSS (то есть нет JS) * Категорически не рекомендуется * | -? Daisyui -? Безголовой UI* | ? Daisyui | - | *Категорически не рекомендуется B/C. Некоторые компоненты потребуют JavaScript и добавления собственного JS, а достижение доступности сложно; Лучший подход состоит в том, чтобы начать с доступного компонента UI-компонента с поддержкой JS для вашей структуры, которая поставляется с хорошими стилями по умолчанию и позволяет стиливать ваши предпочтения (например, Shadcn). - Daisyui предлагает темы, которые могут быть одноразовыми настройками классов Tailwindcss или изменены с помощью директивы Tailwind @apply . Компоненты только для CSS требуют, чтобы DEV добавлял доступные взаимодействия с JS-много работы.- ** Безголовой пользовательский интерфейс - платный продукт с официальной поддержкой React и Vue; может использовать в качестве HTML и CSS с SVELTEKIT, но без JS. - Обновление: больше не будет поддерживать эту строку. |
Из -за широкой экосистемы Next JS, рамки, построенная на вершине следующего JS Blitz JS, также является почетным упоминанием. Он поставляется с функциями, которые следующая JS не поддерживает, как механизм авто, и многое другое. Подходит для средних или больших проектов. А также, вы можете использовать свои следующие знания JS при использовании Blitz JS.
