A HTML oldalak reneszánsza: SSG-k, azaz statikus oldalgenerátorok

Húsznál is több esztendővel ezelőtt, még főiskolás éveim alatt, többek között azzal szereztem plusz bevételt, hogy egy alapítvány teljesen statikus, csak HTML lapokból álló weboldalát tartottam karban. Hát, a Wordpress vagy bármilyen dinamikus tartalomkezelőhöz képest az is dupla annyi melót adott, ha csak egy szövegblokkot kellett a meglévőkhöz befűzni, mintha a modern dinamikus tartalomkezelőkkel csinálnánk. Arról már nem is teszek említést, mit jelentett egy teljesen új oldal befűzése a meglévők közé.

Régen...

Régen, talán úgy 30 évvel ezelőtt ritka volt a dinamikus weboldal, az igazán nagyok kivételével mind statikus, HTML lapokból álló oldal volt, néha még a legalapvetőbb egységes megjelenést is nélkülözve. Fogtál egy Adobe Dreamweavert, Frontpage-et vagy bármi hasonlót, és vagy Word doksikhoz hasonlóan vizuálisan megszerkesztetted (a belső részét az editorra bízva), vagy Notepadben írogattad a HTML kódot. Aztán ha csak egy apró dizájnváltást terveztél, megfelelő mennyiségű kávéval és csipsszel készültél aznap éjjel, hogy a tucatnyi vagy még több egyedi, különálló oldalon végigvidd a módosítást. Ezeket egyszer megcsinálod, és míg nem módosítasz rajtuk, minden látogatónak ugyanazt a kontentet mutatják, nincs környezetfüggő, látogatófüggő változás, felhasználói beavatkozás pedig végképp nincs.

 

 

 

... és most

Aztán megjelent a PHP, meg a többi, direkt weboldalak interaktívvá tételét biztosító programozási nyelv, innentől pedig már jelentek is meg a komplett tartalomkezelők, így pl. a Wordpress-t használva sokszor már programozási tudás nélkül tudunk weboldalt készíteni.

 

 

És hogy ezekkel mit nyertünk? A weboldalak innentől kezdve nem szimplán pár sor infót tartalmazó lapok lettek: eleinte kényelmesebbé vált a tartalom felvitele: helyben, külső editor nélkül lehetett tartalmat hozzáadni, aztán beindultak a felhasználói interakciót lehetővé tevő funkciók: vendégkönyvek, fórumok, user login, kommentek. Az elmúlt 15-20 év irányvonalát pedig jól ismerjük: az ezeket eleinte Web 2.0-nak nevező közösségi média szolgáltatások.

Itt már a triumvirátus vesz részt a honlapok életében:

• weboldal tulajdonosa/szerkesztője
• a szolgáltatásban részt vevő tartalomkészítők
• és azok nézői a saját interakciójukkal (lájkok, kommentek, megosztások)

Ezek mind lehetetlenek lennének a dinamikus, szerveroldali oldalgenerátorok nélkül.

 

 

 

A statikus oldalak ma

Nem haltak ki, mert egyrészt ma minden weboldal outputja végső soron egy HTML dokumentum, függetlenül attól, hogy ezt egy ember kézzel alkotja-e meg, vagy valamelyik programozási nyelv állítja elő a szerveren a látogatás során.

Sőt, inkább reneszánszukat élik. De ehhez is modernizáció mezsgyéjén vezetett az út. Ma már ritka az, hogy valami Frontpage-hez hasonló eszközzel alkossunk egy individuál HTML-t.

Inkább egy SSG (static site generator) segítségével megy ez.

 

Statikus oldalgenerátor

De mi is ez a statikus oldalgenerátor? Nem néztem utána, mióta létezik a fogalom, de tíz éve egészen biztosan. Ez nem más, min egy szoftver, egy tool, ami egy kb. szinte bármilyen inputból HTML fájlok sokaságát állítja elő. Az input kb. bármi lehet, akár félkész HTML oldalak, amiket az SSG befésül az előre elkészített sablonba: így a legenerált 5-10 (vagy több) oldal ugyanazt a látványelemet hordozza magán, egytől egyig. És ha a főmenüt frissíteni kell, nem kell végigmenni mind a százhuszonöt aloldalon: egyszerűen módosítom a template-et és legeneráltatom az oldalakat újra. De ez nem órák vagy percek: ez másodpercek alatt végbemegy.

És hogy miért van ez? Egyrészt ötvözi a dinamikus oldalak (pl. Wordpress) kényelmét, ami lapok százain, ezrein ível túl, a statikus oldalak gyorsaságán.

A dinamikus weboldalak két esetben szenvednek hátrányt a klasszik HTML-hez képest:

• sebesség: itt a kontent valamilyen adatbázisból jön, amit a használt programozási nyelv elkészít a megadott recept alapján, hogy a látogató böngészője már a kész HTML-t kapja meg, futásidőben, azonnal, minden egyes látogatáskor. Ez mind idő. Adatbázis lekérdezés, aztán a kész produktum legenerálása. Egy rosszul megírt weboldal esetén akár kényelmetlenül hosszú idő is lehet.
• sebezhetőség: minél látogatottabb, ismertebb egy website, annál nagyobb célkeresztje lehet támadásoknak. Az oldal közvetlen kapcsolatban áll a szerverrel, hovatovább a látogató interaktálhat is vele, a rosszhiszemú is. A sebezhetőség pedig minden internetre kikerülő eszköz esetén ott van, a kérdés csak az, hogy ki és mikor akarja kiaknázni.

Ezzel szemben a statikus oldal nem hordoz kockázatot (max egy minimálisat csak), hisz nem képes a látogatás vezérelni, alakítani a tartalmat. Cserébe, mivel készen tálalt fájlokról van szó, szélvészgyors.

 

Mutatok egy jó kis workflow-t arról a három verzióról, ahogy ma alapvetően egy weboldal eljuthat a látogatóig.

• itt az első (CSR - client side rendering) a sima, régi, klasszikus HTMl. Megírom, feltöltöm, megnézik
• a második a ma legnépszerűbb dinamikus weboldal (SSR - server side rendering), ahol a szerveren, futásidőben, minden egyes látogatáskor elkészül az éppen látott oldal. Ilyen egy blog, egy webshop vagy egy híroldal
• a harmadik pedig a statikus oldalgenerátor (SSG) által készített weboldal: a generálás pillanatában készülnek el a különálló HTML oldalak, látogatáskor pedig már csak ezt szolgálja ki a webszerver

 

 

 

Mire jó ma a statikus weboldal?

Nem jó bármire, ugyanis a Facebook vagy egy fórum oldal nem működhetne így. De tökéletes pár lapos, ritkán frissülő portfólió vagy bemutatkozó oldalnak. Egy szerelő, fodrász, marketinges (aki amúgy a Facebookon posztol gyakran) internetes névjegykártyájának tökéletes. De még ritkább, egyszerűbb blogolásra is. Az SSG-k segítségével pillanatok alatt módosítható akár az összes oldal bizonyos része (pl. a láblécen lévő telefonszám). Ezekben az esetekben teljesen felesleges, sőt, overkill egy Wordpress oldal. Adatbázis kell, bonyolult telepítés, és persze valahol egy tárhelyen hostolni is kell. Csak azért, hogy félévente egyszer módosítsunk rajta valamit. Ellenben a statikus HTML oldalak olcsón (sokszor ingyen) elhelyezhetők, egyszerűbb fenntartani őket. A GitHub Pages, az Azure Static Web Apps vagy a Cloudflare Pages teljesen ingyen és komplikációktól mentesen szolgáltatja az ilyen weboldalakat.

 

SSG-k

Ritka eset, hogy kézzel álljunk neki egy HTML oldalnak, ez max 1-2 oldal esetén életszerű, amit kb. sohanapján fogunk frissíteni.

Akkor inkább egy statikus oldalgenerátor. Ezekből, mint kb ma mindenből, kismillió létezik, győzze az ember kiválasztani a megfelelőt. Szerencsére van erre egy weboldal, ami alapján a lehetőségeink, terveink, a template-ek és az alkalmazott programozási nyelv alapján lehet választani.

Ezek közül csak néhányat emelnék ki, a teljesség igénye nélkül.

Hugo

Talán az abszolút winner, ha semmi előzményünk vagy speciális igényünk nincs, válasszuk ezt, ma ez az oldalgenerátorok csimborasszója. Go nyelven írták, ezért veszett gyors, ráadásul ezerféle template-et támogat.

Jekyll

A másik nagyágyú, bár kicsit lomhább, mint a Hugo, de abszolút nem jelent hátrányt. Fő előnye, hogy renderelés nélkül, nagyjából zéró konfigurációval képes a GitHub Pages kezelni.

Statiq

A C#, illetve ASP.NET körül mozgóknak lehet érdekes, mert igazából pont ugyanazt tudja mint az első kettő, de gyakorlatilag egy ASP.NET statikus verzió. A C# fejlesztőknek ezt ajánlom, HTML oldal készítéséhez, ahol az ASP overkill, abszolút ezzel dolgozom.

 

De tényleg kismillió ilyen van, kétlem, hogy bárki ne találná meg a saját elképzeléseit az egyikben, néhány próbálkozás és tesztelés után.

 

Verdiktként tényleg érdemes lehet megemlíteni, hogy sem a Wordpress alapú, sem a Hugo által generált oldal nem egymás konkurenciái, egymás mellett tökéletesen megférnek, akár ugyanazon fejlesztő kezében is. Hisz a haver autószerelő internetes névjegyét érdemesebb statikus verzióban megalkotni, míg egy hírportál, webshop vagy fórum egyértelműen egy dinamikus nyelv után kiált. Itt az elérendő cél fogja úgyis meghatározni az eszközt.