HugoPress reference site

Proč statický web vyhrává na hraně sítě

Žádné dotazy do databáze, žádné běhové prostředí — jen předrenderované HTML servírované co nejblíž čtenáři.

Eva Křížová Eva Křížová 1 min čtení
Proč statický web vyhrává na hraně sítě

Když uživatel otevře dynamickou stránku, server typicky sáhne do databáze, sestaví HTML a teprve pak odpoví. U statického webu je tahle práce hotová už během buildu — k requestu zbývá jen poslat hotový soubor.

Co se ušetří

  • Round-trip do databáze — neexistuje, obsah je už v HTML.
  • Čas běhového prostředí — žádný PHP/Node proces na kritické cestě.
  • Vzdálenost — soubor leží v CDN POPu pár desítek kilometrů od čtenáře.

Měřitelný dopad

MetrikaDynamickyStaticky na CDN
TTFB~280 ms~25 ms
LCP (medián)2,4 s0,9 s
Náklady na requestnezanedbatelné~nula

Nejrychlejší dotaz do databáze je ten, který se nikdy nemusí provést.

A co dynamické části?

Komentáře, vyhledávání nebo formuláře se řeší progresivně — staticky se doručí skořápka a interaktivita se dohydratuje z malého kusu JavaScriptu až na klientovi. Tělo článku ale zůstává předrenderované a okamžitě čitelné.

Jak takový obsah vůbec vzniká, jsme popsali v článku Jak postavit headless CMS nad Hugem.

Všechny články
Eva Křížová

Autor

Eva Křížová

Performance engineer, INTEVIA

Ladí doručování webu, měří Core Web Vitals a věří, že nejrychlejší dotaz je ten, který nikdy neproběhne.

Související články

i18n Obsah Hugo

Dvojjazyčný web bez bolesti

Vícejazyčnost bývá ve většině systémů zdroj utrpení — duplicitní šablony, rozjeté překlady, rozbité odkazy mezi jazyky. Hugo to řeší překvapivě elegantně a HugoPress jen dotahuje pár detailů. Jeden layout, dva jazyky Data sekce žijí ve front matteru stránky, layout je sdílený. Stejná šablona layouts/blog/list.html čte .Params.* a vykreslí cs i en variantu — žádná duplikace logiky. Párování přes translationKey Stačí dát oběma verzím stejný translationKey: # content/cs/blog/_index.md translationKey: blog # content/en/blog/_index.md translationKey: blog Hugo z toho automaticky vyrobí dvojici a přepínač jazyků v hlavičce odkáže na správný protějšek. Když překlad chybí, přepínač elegantně degraduje na domovskou stránku druhého jazyka.

Číst dál