Statična generacija strani (SSG)
Statična generacija strani je metoda gradnje spletnih strani, pri kateri so vse strani vnaprej uprizorjene med fazo gradnje v statične datoteke HTML, kar rezultira izjemno hitrimi časi nalaganja in preprostim gostovanjem.
Statična generacija strani (SSG) ustvari vse strani spletnega mesta med korakom gradnje, preden obiščejo kakšno uporabnik. Rezultat je zbirka navadnih datotek HTML, CSS in JavaScript, ki jih lahko neposredno streže CDN brez kakršne koli obdelave na strežniku za vsako zahtevo. Za razliko od dinamičnih spletnih mest, ki generirajo strani ob vsaki zahtevi (SSR) ali v brskalniku (CSR), so statična mesta vnaprej zgrajena.
To odpravlja čas obdelave na strežniku in poizvedbe po bazah podatkov, kar rezultira v najhitrejših možnih časih nalaganja. Priljubljena generatorja statičnih strani vključujeta Next.js (ki podpira tako SSG kot SSR), Gatsby, Hugo, Eleventy in Astro. Ta orodja vzamejo vašo vsebino (iz datotek markdown, CMS-ja ali API-ja) in predloge ter med procesom gradnje ustvarijo celotno spletno mesto.
V praksi
- Dokumentacijska stran s 5.000 stranmi, zgrajena z SSG, naloži vsako stran v manj kot 200 ms, ker ni nobene obdelave na strežniku, le strežanje vnaprej zgrajenega HTML-a iz CDN-a
- Trženjska agencija je svoje stranske spletne strani preselila iz WordPressa na generator statičnih strani, kar je znižalo stroške gostovanja za 90 %, hkrati pa izboljšalo ocene hitrosti strani skoraj do popolnosti
- Blog s 1.000+ članki uporablja SSG z inkrementalnimi ponovnimi gradnjami, dodajanje nove vsebine v nekaj sekundah brez ponovne generacije celotnega mesta
- Ciljna stran, zgrajena z SSG, je dosegla oceno 99/100 Lighthouse zmogljivosti iz škatle, v primerjavi z 62/100 za prejšnjo dinamično generirano verzijo
Več o: Razvoj spletnih strani
- Odzivna zasnova
- Progressivna spletna aplikacija (PWA)
- Enostranska aplikacija (SPA)
- Uprizarjanje na strežniku (SSR)
- Statična generacija strani (SSG)
- API (programski vmesnik aplikacije)
- CMS (Sistem za upravljanje vsebin)
- Headless CMS
- Nadzor verzij
- CI/CD (Neprekinjena integracija / Neprekinjen deploy)
- Okvir JavaScript
- TypeScript
Niste prepričani, kako se to nanaša na vas?
Senior inženir obišče vašo lokacijo, vašo prisotnost v iskalnikih in način, kako prispeta povpraševanja, nato zapiše tri stvari, ki jih je vredno najprej popraviti. Dokument lahko obdržite v vsakem primeru.