svelte vs next
1.0.0
Comparación de las características principales en Sveltekit vs NextJS.
Objetivos: Fast, Fácil, Convención sobre la configuración y las baterías incluidas. Las opciones abrumadoras son malas en lugar de proporcionar un camino claro hacia adelante.
| Seltekit | Nextjs | Ganador | Notas | |
|---|---|---|---|---|
| Ui lib | Esbelto | Reaccionar (o millones o preactuar) | Seltekit | SVELTE ofrece actualizaciones de DOM más rápidas, un tamaño de cliente KB más pequeño, una gestión de estado de componente cruzado mucho más fácil, la capacidad de abstraer el estado receptivo en archivos externos, etc. Svelte5 tiene runas (señales)?, React aún no tiene un equivalente. |
| Dev: recarga caliente | ? | ? | - | Es decir, la recarga automática en el archivo Guardar. |
| Dev: o (1) recarga caliente | ? Vite | ? ? Turbopack (*no habilitado de forma predeterminada) | Seltekit | IE procesa solo los archivos cambiados. Ayuno incluso en grandes proyectos. *Actualizar package.json para habilitar Turbopack: "dev": "next dev --turbo" . |
| Dev: "Actualización rápida" | ? ? (no habilitado de forma predeterminada) | ? | Nextjs | Es decir, el estado de UI conservado en las recargas. |
| Dev: escribe JS moderno | ? | ? | - | |
| Dev: A11y consola sugerencias | ? | Seltekit | ||
| Dev: más bonito | ? | ? | - | Para archivos .svelte o .jsx , respectivamente. Para Sveltekit, instale Svelte for VSCode . |
| Prod: Bundler | ? | ? | - | Por ejemplo, los activos de minificar, etc. ambos están habilitados de forma predeterminada. Cuando Roldown (Rust) está listo en 2024, Svelte podrá cambiar de Rollup+ESBuild a Roldown para construcciones de producción aún más rápidas. |
| Prod: división de código automático, por ruta | ? | ? | - | Es decir, el código automático dividido JS y CSS por ruta y paquete adecuadamente. |
| Prod: construir adaptadores para diferentes hosts | ? | Seltekit | Sveltekit proporciona una fácil portabilidad para muchos hosts. NextJS funciona mejor con Vercel. | |
| Tamaño de KB: Hello World | ? 46.3 (25.6 Gzip) con CSR* ? 2.9 (3.3 GZIP) sin CSR (1.8kb de esto es el favicon; se muestra como más grande con Gzip en Chrome) | 336.3 (131.3 GZIP) (incluye un Favicon de 9.7kb?)* | Seltekit | - *CSR es "enrutador del lado del cliente". - Sveltekit actualizado el 25 de agosto de 2023 usando Sveltekit 1.23 y Svelte 4. - NextJS actualizado el 25 de agosto de 2023 usando el enrutador de aplicaciones, NextJS 13.4.19 y reaccionar 18.2.0. - Ambas pruebas devuelven HTML de <p>hello world</p> y excluyen CSS. |
| Tamaño de KB: aplicación "Real World" | demasiado desactualizado | demasiado desactualizado | - | Desactualizado; PR Bienvenido. *13 de marzo de 2021 https://realworld.svelte.dev/, https://svelte.dev/blog/sapper-towards-the-ideal-web-app-framework |
| Renderización: SSR, por ruta | ? | ? | - | Es decir, el lado del servidor se reproduce en el momento de ejecución. |
| Renderización: transmisión | ? | ? | - | IE Server envía la transmisión HTTP a medida que se convirtió en el servidor, en lugar de esperar a que se complete la representación completa antes de enviar la respuesta. |
| Renderización: estática, por ruta | ? | ? | - | Es decir, HTML estático generado en la hora de construcción. |
| Representación: regeneración estática incremental, por ruta | ? en Vercel sin borde | ? en Vercel sin borde | - | Estatic 'a pedido' en la producción de primera solicitud de producción, luego almacenado en caché como estático. Para otros tiempos de lanzamiento (como Edge en Vercel y Cloudflare), considere configurar el encabezado cache-control de su ruta para usar stale-while-revalidate para algunos beneficios similares. |
| Renderización: "Prerenderado parcial" | ??* | Nextjs | *"Experimental", en NextJS v14 o más nuevo. Permite la prevención estática de una página + áreas dinámicas de transmisión, como botones de autenticación de usuario en un encabezado, estado de carrito de compras, etc. | |
| Encabezados: S-Max-Age & Max-Age, por ruta | ? | ? | - | |
| Rutas: enrutamiento basado en archivos | ? | ? | - | Por simplicidad. Se deben incluir otras utilidades de enrutamiento. |
| Rutas: "Modo de spa" | ? | ? | - | SSR para la carga de página inicial, luego enrutamiento del lado del cliente para páginas posteriores. |
| Rutas: prefetch JS/CSS en el enlace flotante | ? | ? Siguiente/enlace | Seltekit | Por defecto, en Sveltekit, se puede anular o eliminar. Svelte también ofrece un preloadCode() y prefetchData() para precargar todas o algunas rutas especificadas a través de Regex-¡PODERFUL! NextJS requiere usar su componente de enlace; Ver documentos. |
| Incorporado: metadatos | ? | ? Siguiente/Cabeza | - | Lugar dentro de <svelte:head>...</svelte:head> . |
| Incorporado: gestión estatal | ? esbelta/tienda | ? usestar | Seltekit | El ideal es una forma fácil, fácil. React tiene useState , Zustand y otros.SVelTe4 usa vars y tiendas reactivas. SVELTE5 trae runas (señales) para un mejor rendimiento de actualización de DX, mejor de estado que React (debido a que se basa en la señal) y la capacidad de usar reactividad dentro de los archivos de plantilla (por .svelte ) y de soporte de archivos (por ejemplo, .svelte.ts ), habilitando nuevas formas de refactuar y abstraer su código. Svelte continúa ganando en la gestión estatal. |
| Incorporado: animaciones | ? esbelte/animado | Seltekit | Existen opciones de terceros para React, pero no son tan fáciles de usar. La framermoción es popular para React. Motion One también es una gran biblioteca (pequeña y rápida) y funciona con cualquier marco de la interfaz de usuario. | |
| Incorporado: optimizaciones de imágenes | ? Mejorado: IMG (beta) | ? Siguiente/Imagen | - | Optimizaciones de imágenes de tiempo de compilación (conversión a AVIF o WebP), Creación de elemento de imagen con Fallback a JPEG o PNG, cambio de tamaño, Agregar ancho y altura automáticamente, agregue el nombre de nombre de archivo para almacenar en caché, etc., existen servicios alojados si prefieren hacerlo en tiempo de ejecución (imágenes de NubeFlare, Cloudinary, Gumlet, etc.) |
| Incorporado: formularios | ? Acciones de formulario y use:enhance (funciona con o sin JS)o FormSnap (construido en superformas) o Superformas | ? NextJS 13 Acciones de formulario y servidor (funciona con o sin JS, si se construye correctamente) | - | Svelte tiene soporte de forma incorporado con una mejora progresiva que funciona incluso sin JS; Están muy limpios porque las reglas de validación se definen una vez y se usan tanto para el lado del cliente como para el servidor. Formik (para React) es limpio pero requiere JS y duplicación de reglas de validación en el lado del servidor; Similar a Felte (para React, Sveltekit y Vue). |
| Auténtico | ? Auth.js o Lucia | ? Auth.js o Lucia | - | Auth.js (formamente nextAuth.js) es un estándar de facto para NEXTJS; fácil de usar; Correo electrónico, social, y/o un enlace con un solo clic. También es compatible con Sveltekit. Anuncio original. Sin embargo, Lucía es muy popular en la comunidad de Sveltekit. - thecopenhagenbook.com (gratuito por el autor de Lucia) puede ser útil para aprender a configurar la autenticación, para cualquier marco. |
| Generación de imágenes OG | ? @EtherCorps/Sveltekit-Og* | ? @Vercel/OG | Nextjs | @ethercorps/sveltekit-og se basa en Satori, en el que también se basa @vercel/og .* En @ethercorps/sveltekit-og porque no funciona en ciertos hosts como CloudFlare Pages. Crédito a Vercel para crear Satori. Ambos incluyen el soporte Tailwindcss. ¡Oportunidad para que alguien contribuya con una OG lib a Sveltekit! |
| Mapa del sitio | ? Mapa del súper sitio | ? siguiente | - | Super Sitemap gana en facilidad de uso y estar actualizado para las convenciones esperadas para el mapa del sitio, pero ambos hacen el trabajo. Divulgación: soy el autor de Super Sitemap. Problema de GitHub para el soporte oficial de Sitemap.xml en Sveltekit. |
| Recaudación de datos | ? Consulta de Tanstack ? SSWR ? TRPC | ? Consulta de Tanstack ? SWR ? TRPC | - | Fetch/isloading/errores/almacenamiento en caché fácil. SvelTekit proporciona seguridad de tipo automático (ver nota debajo de la muestra de código) para los datos devueltos de las funciones de carga gracias a su módulo $types autogéneados, sin trabajo por parte del desarrollo. |
| CSS compatible con CSS | ? (o a través de Svelte-Add) | ? | Nextjs B/C incorporado. Ambos son fáciles. | Para NEXTJS, simplemente verifique Yes para la opción TailWindcSS al crear su aplicación NextJS usando CREATE-NEXT-APP.Tailwind V4 hará que la configuración sea aún más fácil. |
| Componente de interfaz de usuario libs - estilo | -? Shadcn esvelte (no oficial)* -? FlowBite esbelte -? Esqueleto -? Componentes de carbono esbelto | -? Shadcn ui ** -? Ui de viento de cola -? Mui -? Diseño de hormigas -? Mantine ui -? Chakra ui -? Reaccionamiento de Bite Flow | Nextjs | - *construido en bitsui (similar a Radixui), que se construye en Meltui - ** construido sobre Radixui. |
| Componente de interfaz de usuario libres - sin estilo | -? Bits ui* -? Fundir ui ** - ?? Svelte-Headlessui (no oficial; problemas para el apoyo oficial: 1, 2) | -? Radix UI -? UI sin cabeza -? Reaccionar aria | Nextjs | Componentes de UI de estilo no (desplegable, control deslizante, alternar, etc.). -*construido sobre Meltui, para proporcionar una interfaz de componente más familiar. - ** Melt UI es el sucesor de Radix-Svelte. |
| Documento | 10/10 | 10/10 | - | |
| Directorio de componentes | sveltesociety.dev/Components (agregue el suyo) | - | ||
| Dev Retention (proxy para el disfrute; esbelte vs react) | 90% | 83% | Esbelto | *Fuente: Estado de JS 2022 Front-end Frameworks 'Retención' |
| Filosofía | Principios | ? | n / A | "Las personas usan a Svelte porque les gusta Svelte. Les gusta porque se alinea con sus sensibilidades estéticas. En lugar de esforzarnos por ser el más rápido o más pequeño o lo más pequeño, apuntamos explícitamente ser el marco con las mejores vibraciones ... No estamos tratando de ser el marco más popular, estamos tratando de ser el mejor marco". ? |
Las siguientes son características del marco de baja prioridad porque pueden habilitarse fácilmente mediante alojamiento de proveedores u otras herramientas comunes (por ejemplo, análisis) u otras mejores prácticas han surgido como el uso de marcos de estilo basados en utilidades.
| Kit de esbelto | Nextjs | Ganador | Notas | |
|---|---|---|---|---|
| Incorporado: CSS Scoping | ? | ? | Seltekit | Svelte es automático. NextJS es a través de módulos CSS o CSS en JSX (no tan limpio). Irrelevante si usa TailWindcss. Pase a "baja prioridad" B/C Ahora es estándar usar un marco de estilo basado en utilidad como TailWindcss o ONUCSS para la composición y el intercambio de componentes. |
| Prod: HTTP Early Sugers Respuesta de JS/CSS ** | Ni | ** Ya no es súper relevante como característica marco porque fácilmente habilitada a través de algunos proveedores de plataforma de alojamiento. Reemplaza el empuje del servidor HTTP2. Envíe dos respuestas: 1.) Un estado de respuesta 103 con encabezados que enumeran recursos para precargar y preconectar; 2.) Un estado de respuesta estándar 200 o similar. (Cloudflare puede hacer esto para los sitios automáticamente). | ||
| Informes de vital web ** | ? | Nextjs | ** Ya no es súper relevante como característica marco porque se agregó fácilmente a través de Analytics Snippet ahora o a través de algunos proveedores de plataforma de alojamiento. CloudLFare Site Analytics ofrece un seguimiento de vital web central con configuración cero; Es parte de su fragmento JS. Vercel también lo ofrece si usa NextJS o NuxtJS y tiene un excelente tablero. | |
| Componente de solo CSS (es decir, no js) * categóricamente no recomendado * | -? Marina -? UI sin cabeza* | ? Marina | - | *Categóricamente no recomendado b/c Algunos componentes requerirán JavaScript y agregar su propia JS y lograr la accesibilidad es difícil; El mejor enfoque es comenzar con un componente de interfaz de usuario accesible y habilitado para JS para su marco que viene con buenos estilos predeterminados y permite el estilo a su preferencia (por ejemplo, shadcn). - Daisyui ofrece temas que pueden ser personalizados con clases de Tailwindcss o alteradas usando la directiva @apply de Tailwind. Los componentes solo CSS requieren que el desarrollo agregue interacciones accesibles con JS, un montón de trabajo.- ** La interfaz de usuario sin cabeza es un producto pagado con soporte oficial de React y Vue; puede usar como html y css con sveltekit, pero no js. - Actualización: ya no mantendrá esta fila. |
Debido al amplio ecosistema de Next JS, un marco construido sobre el próximo JS Blitz JS también es una mención de honor. Viene con características que el próximo JS no es compatible con el mecanismo de autores y más. Adecuado para proyectos medianos o de gran tamaño. Y también, puede utilizar su próximo conocimiento JS mientras usa Blitz JS.
