svelte vs next
1.0.0
Comparação dos principais recursos no Sveltekit vs NextJs.
Objetivos: Rápido, fácil, Convenção sobre Configuração e baterias incluídas. As escolhas esmagadoras são ruins em vez de fornecer um caminho claro a seguir.
| Sveltekit | NextJs | Ganhador | Notas | |
|---|---|---|---|---|
| Ui Lib | SVELTE | Reagir (ou milionjs ou prega) | Sveltekit | O Svelte oferece atualizações mais rápidas de DOM, tamanho menor do cliente KB, gerenciamento de estado de componentes cruzados muito mais fácil, capacidade de abstrair o estado responsivo em arquivos externos, etc. Svelte5 tem runas (sinais)?, React ainda não tem um equivalente. |
| Dev: Recarregar a quente | ? | ? | - | IE Recarregar automaticamente em arquivo salvar. |
| Dev: O (1) Recaro quente | ? Vite | ? ? Turbopack (*não ativado por padrão) | Sveltekit | Ou seja, processa apenas os arquivos alterados. Rápido mesmo em grandes projetos. *Update package.json para ativar o Turbopack: "dev": "next dev --turbo" . |
| Dev: "Refresca rápida" | ? ? (não ativado por padrão) | ? | NextJs | Ou seja, o estado da interface do usuário preservado nos recarregamentos. |
| Dev: Escreva JS moderno | ? | ? | - | |
| Dev: A11y Console Dicas | ? | Sveltekit | ||
| Dev: mais bonito | ? | ? | - | Para arquivos .svelte ou .jsx , respectivamente. Para Sveltekit, instale Svelte for VSCode . |
| Prod: Bundler | ? | ? | - | Por exemplo, os ativos minificados, etc. Ambos são ativados por padrão. Quando o Rolldown (ferrugem) estiver pronto em 2024, Svelte poderá mudar de Rollup+Esbuild para o Rolldown para compilações de produção ainda mais rápidas. |
| Prod: divisão de código automático, por rota | ? | ? | - | IE Código automático dividido JS & CSS por rota e pacote adequadamente. |
| Prod: Construir adaptadores para diferentes hosts | ? | Sveltekit | O Sveltekit fornece fácil portabilidade para muitos hosts. NextJs funciona melhor com o Vercel. | |
| KB Tamanho: Hello World | ? 46,3 (25,6 gzip) com CSR* ? 2,9 (3,3 gzip) sem CSR (1,8kb disso é o favicon; mostra o maior com o GZIP no Chrome) | 336.3 (131,3 gzip) (inclui um favicon de 9,7kb?)* | Sveltekit | - *CSR é "roteador do lado do cliente". - Sveltekit Atualizado em 25 de agosto de 2023 Usando Sveltekit 1.23 & Svelte 4. - NextJs Atualizado em 25 de agosto de 2023 usando o roteador de aplicativos, NextJs 13.4.19, & React 18.2.0. - Ambos os testes retornam html de <p>hello world</p> e excluem o CSS. |
| Tamanho KB: aplicativo "mundo real" | Muito desatualizado | Muito desatualizado | - | Desatualizado; PR Bem -vindo. *13 de março de 2021 https://realworld.svelte.dev/, https://svelte.dev/blog/sapper-towards-the-ideal-web-app-framework |
| Renderização: SSR, por rota | ? | ? | - | Ou seja, o servidor renderizado no tempo de execução. |
| Renderização: streaming | ? | ? | - | O servidor IE envia o fluxo HTTP conforme renderizado no servidor, em vez de aguardar a renderização completa para concluir antes de enviar a resposta. |
| Renderização: estática, por rota | ? | ? | - | Ou seja, HTML estático gerado no momento da construção. |
| Renderização: regeneração estática incremental, por rota | ? em vercel sem borda | ? em vercel sem borda | - | Estático 'sob demanda' na produção - o primeiro pedido dinâmico e depois em cache como estático. Para outros tempos de execução (como o Edge on Vercel & Cloudflare), considere definir o cabeçalho cache-control da sua rota para usar stale-while-revalidate benefício semelhante para alguns benefícios semelhantes. |
| Renderização: "Prendering parcial" | ??* | NextJs | *"Experimental", no NextJS v14 ou mais recente. Permite pré -rendring estático de uma página + streaming de áreas dinâmicas, como botões de autenticação de usuário em um cabeçalho, status de carrinho de compras, etc. | |
| Cabeçalhos: S-max-ida e Max-Age, por rota | ? | ? | - | |
| Rotas: roteamento baseado em arquivos | ? | ? | - | Por simplicidade. Outros utilitários de roteamento devem ser incluídos. |
| Rotas: "modo de spa" | ? | ? | - | SSR para carregamento inicial da página e, em seguida, roteamento do lado do cliente para as páginas subsequentes. |
| Rotas: pré-busca JS/CSS no Link Hover | ? | ? Próximo/link | Sveltekit | Por padrão, no Sveltekit, pode ser substituído ou removido. A Svelte também oferece um preloadCode() e prefetchData() para pré-carregar todas ou algumas rotas especificadas via Regex--Powerful! NextJS requer o uso de seu componente de link; Veja documentos. |
| Embutido: metadados | ? | ? Próximo/cabeça | - | Coloque dentro de <svelte:head>...</svelte:head> . |
| Integral: Gerenciamento de Estado | ? SVELTE/STORE | ? uso | Sveltekit | O ideal é um caminho fácil e interno. React tem useState , Zustand, e outros.O SVELTE4 usa vars e lojas reativos. O SVELTE5 traz runas (sinais) para um DX ainda melhor, melhor desempenho de atualização de estado do que o React (devido ao fato de ser baseado no sinal) e a capacidade de usar a reatividade dentro dos arquivos de modelo (por exemplo .svelte ) e suportar arquivos (por .svelte.ts . Sitete continua a vencer a gestão do estado. |
| Embutido: animações | ? esbelto/animado | Sveltekit | Existem opções de terceiros para reagir, mas não são tão fáceis de usar. Framermotion é popular para reagir. O movimento é também uma ótima biblioteca (pequena e rápida) e trabalha com qualquer estrutura da interface do usuário. | |
| Integral: otimizações de imagem | ? aprimorado: img (beta) | ? Próximo/imagem | - | Otimizações de imagem de tempo de construção (conversão para AVIF ou WebP), criação de elemento de imagem com fallback para JPEG ou PNG, redimensionamento, adicionando largura e altura automaticamente, adicione o nome do arquivo hash para cache, etc. Os serviços hospedados também existem se você preferir fazer isso no tempo de execução (imagens em nuvem, nuvem, gumina, etc) |
| Integral: formulários | ? Ações e use:enhance (funciona com ou sem JS)ou Formsnap (construído em superforms) ou Superforms | ? Ações do Formulário e Servidor NextJs 13 (funciona com ou sem JS, se construído corretamente) | - | A Svelte possui suporte de formulário integrado com um aprimoramento progressivo que funciona mesmo sem JS; Eles estão muito limpos porque as regras de validação são definidas uma vez e usadas para o lado do cliente e do servidor. O Formik (para React) está limpo, mas requer JS e duplicação de regras de validação no lado do servidor; Semelhante a Felte (para React, Sveltekit e Vue). |
| Auth | ? Auth.js ou Lucia | ? Auth.js ou Lucia | - | Auth.js (formalmente nextauth.js) é padrão de defacto para o próximojs; fácil de usar; Email, link social e/ou com um clique. Ele também suporta Sveltekit. Anúncio original. No entanto, Lucia é muito popular na comunidade Sveltekit. - TheCopenhagenBook.com (gratuito pelo autor de Lucia) pode ser útil para aprender a configurar a auth, para qualquer uma das estruturas. |
| Geração de imagem OG | ? @EtherCorps/Sveltekit-OG* | ? @vercel/og | NextJs | @ethercorps/sveltekit-og é baseado no Satori, no qual @vercel/og também se baseia.* On @ethercorps/sveltekit-og porque não está trabalhando em determinados hosts como o Cloudflare. Crédito à Vercel por criar Satori. Ambos incluem suporte para Tailwindcss. Oportunidade para alguém contribuir com um OG Lib para Sveltekit! |
| Sitemap | ? Super Sitemap | ? Next-sitemap | - | O Super Sitemap vence com facilidade de uso e está atualizado para as convenções esperadas para o Sitemap, mas ambas fazem o trabalho. Divulgação: sou o autor do Super Sitemap. Problema do GitHub para suporte oficial do Sitemap.xml no Sveltekit. |
| Busca de dados | ? Consulta de Tanstack ? Sswr ? TRPC | ? Consulta de Tanstack ? SWR ? TRPC | - | FECTILIZAÇÃO/ISSOLHADO/ERROS/CACHING FÁCIL. O Sveltekit fornece segurança do tipo automático (veja a nota abaixo da amostra de código) para obter dados retornados das funções de carga graças ao seu módulo $types autogenerados, sem trabalho por parte do Dev. |
| Tailwind CSS Compatível | ? (ou via esgoto-add) | ? | NextJs B/C incorporado. Ambos são fáceis. | Para o NextJS, basta verificar Yes a opção Tailwindcss ao criar seu aplicativo NextJS usando o Create-Next-App.Tailwind V4 tornará a configuração ainda mais fácil. |
| Componente da interface do usuário Libs - com estilo | -? SHADCN SVELTE (não oficial)* -? Flowbite Delte -? UI do esqueleto -? Componentes de carbono Site | -? Shadcn ui ** -? Tailwind Ui -? Mui -? Projeto de formiga -? Ui do Mantino -? Ui de chakra -? Flowbite React | NextJs | - *construído em Bitsui (semelhante ao Radixui), que por si só é construído em Meltui - ** construído no Radixui. |
| Componente da interface do usuário Libs - sem si | -? Bits ui* -? Melt Ui ** - ?? SVELTE-PONTELENTUI (não oficial; questões de apoio oficial: 1, 2) | -? Radix UI -? Ui sem cabeça -? Reaja ária | NextJs | Componentes da interface do UI ONU (suspensão, controle deslizante, alternativa, etc.). -*construído no Meltui, para fornecer uma interface de componente mais familiar. - ** A interface do usuário do derretimento é o sucessor do Radix-Svelte. |
| Documentos | 10/10 | 10/10 | - | |
| Diretório de componentes | sveltesociety.dev/components (adicione o seu) | - | ||
| Retenção Dev (proxy de prazer; esbelto vs react) | 90% | 83% | SVELTE | *Fonte: Estrutura do Estado do JS 2022 'Retenção' do front-end 'Retenção' |
| Filosofia | Princípios | ? | n / D | "As pessoas usam esbeltas porque gostam de esbelto. Eles gostam porque isso se alinha com suas sensibilidades estéticas. Em vez de se esforçar para ser a mais rápida, menor ou o que quer que seja, pretendemos explicitamente ser a estrutura com as melhores vibrações. ... Não estamos tentando ser a estrutura mais popular, estamos tentando ser a melhor estrutura". ? |
A seguir, são apresentados os recursos da estrutura de baixa prioridade, porque eles podem ser ativados facilmente por meio de provedores de hospedagem ou outras ferramentas comuns (por exemplo, análises) ou outras práticas recomendadas surgiram como usar estruturas de estilo baseadas em utilidade.
| Kit esbelto | NextJs | Ganhador | Notas | |
|---|---|---|---|---|
| Embutido: escopo do CSS | ? | ? | Sveltekit | SVELTE's é automático. NextJS 'é via módulos CSS ou CSS no JSX (não tão limpo). Irrelevante se você usar o Tailwindcss. Mudar para a "baixa prioridade" B/C agora é padrão usar uma estrutura de estilo baseada em utilidade, como o TailWindcss ou Unocss para composibilidade e compartilhamento de componentes. |
| Prod: http dicas antecipadas Resposta de JS/CSS ** | Nenhum | ** Não é mais super relevante como um recurso -quadro, porque facilmente ativado por meio de alguns provedores de plataforma de hospedagem. Substitui o servidor HTTP2 Push. Envie duas respostas: 1.) Um status de resposta de 103 com cabeçalhos listando recursos para pré -carga e pré -conectar; 2.) Um status padrão de resposta de 200 ou similar. (Cloudflare pode fazer isso para sites automaticamente.) | ||
| Relatórios de vitais na web ** | ? | NextJs | ** Não é mais super relevante como um recurso -quadro porque agora adicionou facilmente via Snippet da Analytics ou por meio de alguns provedores de plataforma de hospedagem. O CloudlFare Site Analytics oferece o rastreamento principal da Web com configuração zero; Faz parte do trenó JS. A Vercel também oferece se estiver usando o NextJs ou o NuxtJS e possui um painel excelente . | |
| Componente somente CSS Libs (ou seja, não JS) * categoricamente não recomendado * | -? Daisyui -? Ui sem cabeça* | ? Daisyui | - | *Categoricamente não recomendado porque alguns componentes exigirão JavaScript e adicionar seu próprio JS e alcançar a acessibilidade é difícil; A melhor abordagem é começar com um componente de interface do usuário acessível, habilitado para JS, para sua estrutura que vem com bons estilos padrão e permite o estilo de sua preferência (por exemplo, shadcn). - Daisyui oferece temas que podem ser personalizados com aulas de TailWindcss ou alteradas usando a diretiva @apply do Tailwind. Os componentes somente CSS exigem que o desenvolvente adicione interações acessíveis com JS-um muito trabalho.- ** A interface do usuário sem cabeça é um produto pago com o reacto oficial e o suporte à VUE; pode usar como html & css com sveltekit, mas não js. - Atualização: não manterá mais esta linha. |
Devido ao amplo ecossistema do Next JS, uma estrutura construída sobre o próximo JS Blitz JS também é uma menção honrosa. Ele vem com recursos que o próximo JS não suporta nativamente como mecanismo de autenticação e muito mais. Adequado para projetos de médio ou grande porte. E também, você pode utilizar seu próximo conhecimento JS enquanto estiver usando o Blitz JS.
