Static site generators vergeleken, met gemeten buildtijden
Static site generators vergeleken
Static site generators vergeleken: Astro vs Hugo vs Eleventy, buildtijden | We.Inc
Astro, Hugo, Eleventy, Next.js static export en Jekyll vergeleken, met buildtijden gemeten op dezelfde 1,000 Markdown-posts, een featuretabel en hetzelfde posttemplate in elke tool.
Een static site generator zet Markdown en templates tijdens de build om in gewone HTML-bestanden, die elke host of elk CDN snel kan serveren. Hugo bouwt het snelst; in onze test maakte het van 1,000 posts pagina's in minder dan een halve seconde. Eleventy is het flexibelst, en Astro past het best wanneer sommige delen interactieve componenten nodig hebben.
Kies in één regel
Als u
Gebruik
De snelste builds wilt voor duizenden pagina's
Hugo
Gewoon JavaScript wilt en weinig voorschriften
Eleventy
Enkele interactieve componenten nodig hebt
Astro
Al een React- of Next.js-codebase hebt
Next.js static export
We gaven Astro, Eleventy en Hugo dezelfde 1,000 Markdown-posts en maten van elk drie schone builds, zodat de cijfers echt vergelijkbaar zijn. Onder de resultaten laat dezelfde postpagina in elke tool zien hoe het werken ermee aanvoelt.
Schrijf content als Markdown-bestanden met front matter.
Schrijf een template dat elke post in uw paginalay-out plaatst.
Start de build; elk bestand wordt een HTML-pagina.
Upload de uitvoermap naar een willekeurige statische host of CDN.
Buildtijd telt vooral bij grote sites en preview-deploys; onder een paar honderd pagina's zijn ze allemaal snel.
Houd afbeeldingen uit Markdown-mappen die ongewijzigd worden gekopieerd; laat de beeldpipeline van de tool ze verkleinen.
Voeg vanaf het begin een sitemap en canonieke URL's toe; de meeste generators hebben voor beide een plugin.
Combineer de generator voor niet-technische redacteuren met een headless of Git-gebaseerd CMS.
Veelgestelde vragen
Wat is de Jamstack?
Een manier om sites te bouwen als vooraf gebouwde HTML, CSS en JavaScript die vanaf een CDN worden geserveerd, met dynamische functies via API's. Static site generators maken het vooraf gebouwde deel.
Is Hugo sneller dan Astro?
Voor gewone Markdown-pagina's wel, en in onze test met ruime marge: ongeveer 0.3 seconden tegenover ongeveer 1 seconde voor 1,000 posts, eenmaal opgewarmd. Astro doet meer per pagina, zoals type-gecontroleerde content en het renderen van componenten.
Kan een statische site formulieren en zoeken hebben?
Ja. Formulieren kunnen versturen naar een formulierdienst of een serverless functie, en zoeken kan in de browser draaien vanuit een vooraf gebouwde index. Geen van beide heeft een traditionele server nodig.
Is een statische site goed voor SEO?
Zeer. Elke pagina is bij het eerste laden volledige HTML, snel te serveren en makkelijk te lezen voor crawlers. U hebt nog steeds goede titels, beschrijvingen, interne links en een sitemap nodig.
Wanneer u geen generator moet gebruiken
Als de mensen die de site bijwerken niet vertrouwd zijn met Markdown en Git, bespaart een gehoste websitebouwer of een CMS met visuele editor u veel begeleiding. Generators blinken uit wanneer ontwikkelaars de site beheren of wanneer een CMS ze van content voorziet.
Buildtijden, gemeten
Dezelfde 1,000 posts in elke tool, met de uitvoer vóór elke run verwijderd. Herhaalde runs zijn sneller omdat de tools en het besturingssysteem opgewarmde caches hebben.
Gemeten: 1,000 Markdown-posts naar HTML (seconden)
Generator
Eerste run
Herhaalde runs
Hugo 0.167
Eleventy 3.1
Astro 7.3
0.97 tot 1.01
Hoe ze zich verhouden
Naast elkaar
Astro
Hugo
Eleventy
Next.js export
Jekyll
Taal
JavaScript / TypeScript
Go (één binary)
JavaScript
JavaScript / TypeScript
Ruby
Templates
.astro, plus React, Vue, Svelte
Go-templates
Nunjucks, Liquid, WebC, JS en meer
React
Liquid
Standaard meegeleverde JavaScript
Geen
Geen
Geen
React-runtime
Geen
Interactieve delen
Islands met client-directives
Eigen scripts toevoegen
Eigen scripts of WebC toevoegen
Elke React-component
Eigen scripts toevoegen
Licentie
MIT
Apache-2.0
MIT
MIT
MIT
Het best voor
Contentsites die een paar interactieve delen nodig hebben
Zeer grote sites, snelle builds
Flexibele, minimale sites
React-teams die statische uitvoer willen
Blogs op GitHub Pages
Dezelfde postpagina in elke tool
Astro: een blogpostpagina uit een content collection
De collection controleert de front matter van elke post tegen een schema, en getStaticPaths maakt tijdens de build één pagina per post.
Eleventy: een lay-out voor elke post in een map
Een posts.json-bestand in de map past de lay-out toe op elk Markdown-bestand daarin, via de data cascade van Eleventy.
Hugo: een template voor één pagina
Hugo kiest dit template voor elke pagina in content/. .Content is de gerenderde Markdown.
Next.js: static export
Door output op export te zetten, schrijft de build gewone HTML-bestanden naar de map out. Functies die een server nodig hebben, zoals server actions en on-demand rendering, zijn in deze modus niet beschikbaar.