Static site generator a confronto, con tempi di build misurati
Static site generator a confronto
Static site generator a confronto: Astro vs Hugo vs Eleventy, tempi di build | We.Inc
Astro, Hugo, Eleventy, export statico di Next.js e Jekyll a confronto, con tempi di build misurati sugli stessi 1,000 post Markdown, una tabella delle funzionalità e lo stesso template di post in ciascuno.
Uno static site generator trasforma Markdown e template in semplici file HTML in fase di build, che qualsiasi hosting o CDN può servire velocemente. Hugo è il più rapido nelle build; nel nostro test ha trasformato 1,000 post in pagine in meno di mezzo secondo. Eleventy è il più flessibile, e Astro è la scelta migliore quando alcune parti richiedono componenti interattivi.
Scegli in una riga
Se
Usa
Vuoi le build più rapide per migliaia di pagine
Hugo
Vuoi JavaScript puro e poche convenzioni imposte
Eleventy
Ti servono alcuni componenti interattivi
Astro
Hai già una codebase React o Next.js
Export statico di Next.js
Abbiamo dato ad Astro, Eleventy e Hugo gli stessi 1,000 post Markdown e cronometrato tre build pulite per ciascuno, così i numeri confrontano situazioni identiche. Sotto i risultati, la stessa pagina di post in ogni strumento mostra com'è lavorarci.
Scrivi i contenuti come file Markdown con front matter.
Scrivi un template che avvolge ogni post nel layout della pagina.
Esegui la build; ogni file diventa una pagina HTML.
Carica la cartella di output su qualsiasi hosting statico o CDN.
Il tempo di build conta soprattutto per i siti grandi e i deploy di anteprima; sotto qualche centinaio di pagine, sono tutti veloci.
Tieni le immagini fuori dalle cartelle Markdown che vengono copiate così come sono; lascia che la pipeline delle immagini dello strumento le ridimensioni.
Aggiungi fin dall'inizio una sitemap e gli URL canonical; la maggior parte dei generatori ha un plugin per entrambi.
Per chi modifica i contenuti senza competenze tecniche, abbina il generatore a un CMS headless o basato su Git.
Domande frequenti
Che cos'è il Jamstack?
Un modo di costruire siti come HTML, CSS e JavaScript precompilati serviti da una CDN, con funzionalità dinamiche aggiunte tramite API. Gli static site generator producono la parte precompilata.
Hugo è più veloce di Astro?
Per semplici pagine Markdown sì, con ampio margine nel nostro test: circa 0.3 secondi contro circa 1 secondo per 1,000 post, una volta riscaldate le cache. Astro fa più lavoro per pagina, come i contenuti con controllo dei tipi e il rendering dei componenti.
Un sito statico può avere moduli e ricerca?
Sì. I moduli possono inviare a un servizio per moduli o a una funzione serverless, e la ricerca può girare nel browser a partire da un indice precompilato. Nessuno dei due ha bisogno di un server tradizionale.
Un sito statico va bene per la SEO?
Molto. Ogni pagina è HTML completo al primo caricamento, veloce da servire e facile da leggere per i crawler. Servono comunque buoni title, descrizioni, link interni e una sitemap.
Quando non usare un generatore
Se chi aggiorna il sito non si trova a suo agio con Markdown e Git, un website builder in hosting o un CMS con editor visuale ti risparmieranno molta assistenza. I generatori danno il meglio quando il sito è in mano agli sviluppatori o quando un CMS fornisce loro i contenuti.
Tempi di build, misurati
Gli stessi 1,000 post in ogni strumento, con l'output cancellato prima di ogni esecuzione. Le esecuzioni ripetute sono più veloci perché gli strumenti e il sistema operativo hanno le cache già calde.
Misurato: da 1,000 post Markdown a HTML (secondi)
Generatore
Prima esecuzione
Esecuzioni ripetute
Hugo 0.167
Eleventy 3.1
Astro 7.3
da 0.97 a 1.01
Come si confrontano
Fianco a fianco
Astro
Hugo
Eleventy
Next.js export
Jekyll
Linguaggio
JavaScript / TypeScript
Go (un solo binario)
JavaScript
JavaScript / TypeScript
Ruby
Template
.astro, più React, Vue, Svelte
Template Go
Nunjucks, Liquid, WebC, JS e altri
React
Liquid
JavaScript inviato di default
Nessuno
Nessuno
Nessuno
Runtime di React
Nessuno
Parti interattive
Isole con direttive client
Aggiungi i tuoi script
Aggiungi i tuoi script o WebC
Qualsiasi componente React
Aggiungi i tuoi script
Licenza
MIT
Apache-2.0
MIT
MIT
MIT
Ideale per
Siti di contenuti che richiedono alcune parti interattive
Siti molto grandi, build veloci
Siti flessibili e minimali
Team React che vogliono un output statico
Blog su GitHub Pages
La stessa pagina di post in ciascuno
Astro: una pagina di post del blog da una content collection
La collection controlla il front matter di ogni post rispetto a uno schema, e getStaticPaths crea una pagina per post in fase di build.
Eleventy: un layout per ogni post in una cartella
Un file posts.json nella cartella applica il layout a ogni file Markdown al suo interno, tramite la data cascade di Eleventy.
Hugo: un template per pagina singola
Hugo sceglie questo template per ogni pagina in content/. .Content è il Markdown renderizzato.
Next.js: export statico
Impostare output su export scrive semplici file HTML nella cartella out in fase di build. Le funzionalità che richiedono un server, come le server action e il rendering on demand, non sono disponibili in questa modalità.
Scrivi prima i contenuti? Tieni a portata di mano il