Što je statički generator web stranica?

Kako su web stranice rasle kako bi pružale sve više i više sadržaja, industrija web razvoja pronašla je nove načine kako učiniti postupak održavanja i ažuriranja web stranica učinkovitijim. Prije mnogo godina vidjeli smo pomak od ručno izrađeni pojedinačnih datoteka do sustava u kojem bi se ponovljeni odjeljci koda mogli uključiti i lakše ponoviti. Web poslužitelji izvršavali bi taj zadatak na zahtjev kad god bi se primio zahtjev za resursom. Vjerno bi kombinirali predloške i sadržaj, primjenjivali petlje, logiku i vraćali prikaz stranice kad god bi to zatražili. Trebali smo im osigurati dovoljno serverske snage da prate korak sa potražnjom odnosno vremena kad je naša web stranica postala popularna.

Statički generatori web stranica (SSG) Static Site Generators rade gotovo istu stvar. Primjenjuju podatke/kod i sadržaj na predloške i generiraju prikaz stranice koji se može poslužiti posjetiteljima web stranice.

Najveća razlika između statičkog generatora web stranica i tradicionalnog snopa web aplikacija je u tome što, umjesto da čeka dok se stranica zatraži i potom svaki put generira svoj pogled na zahtjev, statički generator web stranica to čini unaprijed tako da je pogled spreman za prikazivanje prije zahtjeva. I to čini za svaki mogući prikaz web mjesta u vrijeme izrade.

Zamislite statički generator web stranica kao skriptu koja uzima podatke, sadržaj i predloške, obrađuje ih i daje punu mapu/strukturu svih rezultirajućih stranica i sredstava.

To ima brojne vrijedne učinke, ali najvažnije je to što takav sadržaj preusmjerava sa “vremena zahtjeva” (kada korisnici traže sadržaj) na “vrijeme izgradnje”, što nije povezano s onim kada korisnici traže pogled stranice. Ova „ne vezana“ arhitektura prekida odnos između broja posjeta web mjestu i općenitog generiranja prikaza za usluživanje svih tih posjeta odnosno manje serverske zahtjeve.

Dijagram: generiranje statičkog web mjesta odvojeno je od zahtjeva za posluživanjem servera.

Zašto su statički generatori web stranica toliko popularni sada?

Ovo bi moglo zvučati kao povratak na “stare načine” izrade web stranica, ali postoje neke ključne razlike:

Statički generatori web stranica su postali dobri!

Web alati su se tijekom godina znatno poboljšali. Kako smo saznali koje su mogućnosti najvažnije za posao generiranja puno stranica web mjesta, novi alati su se pokazali posebno dobro. A ti su alati sada vrlo dostupni programerima, što znači da mogu započeti s radom, biti produktivni i početi izrađivati ​​web stranice za nekoliko minuta.

Generatori statičkih webstranica koriste različite web tehnologije

Kako je ovaj pristup počeo stjecati popularnost, sve više i više programera izrađivalo je alate za rad u jeziku i okolini koji su najbolje odgovarali njihovom razvojnim potrebama. Sada možete pronaći generatore stranica koji se temelje na velikom broju programskih jezika, koriste različite programske jezike i procedure za predloške te rade u svim vrstama okruženja. Ta poznatost rađa produktivnost.

Automatizacija je postala mainstream

Zadatak ažuriranja web stranice izgrađene na ovaj način uključuje pokretanje generatora web stranica za izradu ažurirane verzije stranica. Predhodnih godina to je bilo glomazno, ali sada postoji mnogo alata koji nam mogu automatizirati taj zadatak. Rezultat je razvojni tijek rada koji je vrlo učinkovit i predvidljiv, ali koji također rezultira vrlo robusnim, unaprijed generiranim prikazima.

Zašto koristiti statički generator web stranica?

Mnogo je prednosti web stranice koja je izgrađena na ovaj način. Možda su najznačajnije od njih:

• Sigurnost
• Struktura
• Brzina izvođenja

Razgovarajmo malo o tim prednostima.

Sigurnost

Budući da statički generatori web stranica produciraju skup statičkih elemenata koji se mogu poslužiti s pojednostavljenog web poslužitelja, ili još bolje - izravno i u potpunosti iz mreže za isporuku sadržaja (CDN), oni imaju izuzetno dobar sigurnosni profil. Budući da su unaprijed prikazani i spremni za služenje, infrastruktura koja je uključena u njihovo prikazivanje može se znatno pojednostaviti i imati vrlo malo vektora za zlonamjerni napad. Kada uklonimo potrebu poslužiteljima da izvršavaju logiku i brojne zahtjeve CMS-a, uklanjamo načine da im loši momci ubrizgavaju zlonamjerni kod i zavaravaju ih u izvršavanju prikazivanja sadržaja web stranica.

A kad ne trebamo pristupiti bazama podataka, izvoditi logičke operacije ili mijenjati resurse za svaki prikaz, možemo drastično pojednostaviti svoju infrastrukturu hostinga. To također dodatno poboljšava sigurnost jer je manje zahtjeva prema poslužitelju koji obrađuju zahtjeve.

Ne postoji sigurniji poslužitelj od onog koji ne postoji.

Struktura

Ljepota web stranice koja je već generirana je u tome što je svaka stranica spremna za posluživanje bez dodatnog rada poslužitelja za svaki zahtjev. Ne trebamo dodavati više računalne snage za nagle poraste prometa, jer nema zamršene procedure za svaki zahtjev korisnika. Posao smo obavili ranije. Uspjeli smo osigurati da je sve ispravno, kao dio našeg automatiziranog postupka izrade sa generatorima staticnog sadržaja, a sada jednostavno dajemo korisnicima ono što su tražili.

To sliči tipu keširanja koje tradicionalne arhitekture često dodaju kao sloj uz temeljnu dinamičku infrastrukturu. Ali omogućuje nam da se odreknemo složenog upravljanja predmemoriranim i onim što treba ažurirati na temelju puno različitih parametara. S unaprijed izgrađenim web mjestom sve se može predmemorirati u CDN i izravno poslužiti. Arhitektura je prema zadanim postavkama optimizirana kao mjerilo.

Brzina izvođenja

Na vrijeme potrebno za ispunjenje zahtjeva utječu udaljenost koju mora prijeći, broj sustava s kojima mora komunicirati i posao koji se obavlja u svakom od tih sustava.

Kada izrađujemo web stranice pomoću statičkog generatora web mjesta, posjetitelji uopće ne trebaju interakciju s bilo kojim mehanizmom koji je uključen u generiranje svakog pregleda! Rezultat svih prethodnih radova možemo isporučiti izravno iz distribuirane mreže predmemorija (CDN), čineći udaljenost putovanja zahtjeva veoma kratikim i potpuno izbjegavajući interakciju s bilo kojim od sustava servera.

Izvedba može poletjeti. I glavobolje planiranja i planiranja proračuna za infrastrukturu potrebnu za održavanje te izvedbe tijekom planirane (i neplanirane!) razine prometa nestaju.

Kako pronaći najbolji statički generator web stranica?

“Ok, uvjeren sam. Koji je najbolji?”

Postoji niz ključnih razmatranja prilikom traženja najboljeg statičkog generatora web mjesta za vas i vaš sljedeći projekt. Pogledajmo 3 najvažnija.

1. Što izrađujete?

U središtu odabira pravog alata je razmatranje posla koji s njim trebate obaviti. Važno je razmotriti da produkt generatora web mjesta pruža najbolje moguće iskustvo za korisnike vaše web stranice.

Izrađujete li …

• Web mjesto čija je primarna funkcija isporuka sadržaja? Ako je to slučaj, alat koji daje prioritet generiranju stranica i URL-ova, a istovremeno vam daje izravnu kontrolu nad sadržajem, mogao bi biti vaš najbolji izbor. Alati kao što su Jekyll, Hugo, Nuxt i Eleventy to zaista čine vrlo dobro.
• Web mjesto sa složenijom aplikacijskom funkcijom? Neke se web stranice manje bave “prikazivanjem”, a više “izvršavanjem”. I dok se većina SSG-ova može koristiti kao osnova za web aplikaciju, drugi dolaze s naprednijim značajkama na strani klijenta koje su spremne za rad. GatsbyJS, NextJS i SapperJS mogu pružiti neke korisne mogućnosti.
• Velika web lokacija s mnogo tisuća stranica? Statički generatori web mjesta postižu sve brže i brže izrade. Ali to još uvijek može potrajati. Ako imate jako puno stranica za generiranje, morat ćete to razmotriti. Neki alati imaju nevjerojatno impresivna generatorska vremena. Hugo je posebno impresivan. Kao i Eleventy i nedavna ažuriranja Jekylla.

2. Kako gradite?

Slijedeći ono što gradite, možda je sljedeće najvažnije razmatranje kako planirate to graditi. Osiguravanje djelotvornog razvojnog iskustva može imati velik utjecaj na uspjeh. Ako ste specijalizirani za .net, i dalje možete raditi sa statičkim generatorima i imati koristi od gore opisanih prednosti bez prelaska iz svog poznatog razvojnog ekosustava. Ne trebate učiti potpuno novi jezik. Pa opet, ako više volite JavaScript, postoji mnogo SSG-ova koji bi vam mogli odgovarati. Postoje inačice koje koriste različite JavaScript okvire kao što su React, Vue, Angular ili možda vanilla, framework-less JavaScript.

SSG možete prilagoditi ukusu i tijekovima rada vašeg razvojnog tima ili klijenta. I radite na način koji vama odgovara.

3. Koliko su složene vaše potrebe za predlošcima?

Vrsta raznolikosti i složenosti web mjesta koje izrađujete mogla bi utjecati na alate za izradu predložaka koje ćete imati na raspolaganju. Većina SSG-ova daje neki koncept ponovne upotrebe koda sa stvarima poput dijelova, uključuje, makronaredbe i tako dalje. Ali možda biste željeli ići dublje. Okviri kao što su Vue i React omogućuju korištene modele komponenata koji logično bilježe ne samo vizualni stil i sadržaj, već i ponašanje i funkcionalnost. Dakle, ako je vaš projekt više aplikacija nego web lokacija (web lokacija koja „radi“, nego stranica koja „pregledava“), tada bi odabir SSG-a na temelju jednog od tih okvira bio koristan. Ima li vaš tim ili klijent već određene vještine i preferencije za postojeći jezik predložaka? Nastavak podržavanja te mogućnosti možda vam ide u korist.

Koji god alat odabrali, imajte na umu da su potrebe korisnika web mjesta najvažnije. Pronađite razvojni tijek rada i set alata koji vam omogućavaju da budete produktivni i generirate web stranice koje najbolje odgovaraju potrebama vaših korisnika.

Gdje dalje?

Možete pronaći poduži popis statičkih generatora web stranica i naučiti svaki o njima na staticgen.com. Mnogi od njih povezani su s primjerima predložaka projekata koje možete koristiti za brzo kloniranje i postavljanje uzorka projekta koji će vam pomoći da započnete eksperimentiranje u rekordnom vremenu.

Za detaljnija objašnjenja o ovom načinu gradnje web mjesta i nekim alatima i tehnikama, možda ćete htjeti ući u ovaj opsežni uvod u Jamstack , koji istražuje statičke generatore stranica i druge alate. Dostupna je raščlamba sadržaja s izravnim vezama na određene dijelove ovog 3,5-satnog videozapisa.