Statikus generálású honlapok dinamizálásának eszközei

Ne adjunk teret az elburjánzó backend kódoknak!

Icon made by Freepik from www.flaticon.com is licensed by CC 3.0 BY

A statikus generálású oldalak legnagyobb előnye adja egyben a legnagyobb kihívást is. A látogatóknak fix HTML lapokat adunk vissza, mindig és mindenkinek ugyanazt, kizárva annak lehetőségét, hogy a szerver adatokat vegyen át a felhasználóktól, vagy testre szabott egyedi válaszokat állítson elő és küldjön vissza számukra.

Ebben az architektúrában legtöbbször teljesen hiányzik a szerver oldali szkript futtatás lehetősége. Enélkül pedig számos alapvető dinamikus funkció megoldása akadályokba ütközik. Vagy mégsem?

Ne temessük el teljesen annak a lehetőségét, hogy egy statikus generálású oldalon interakcióba kerüljünk a látogatókkal, mert több lehetőség is született már ezek megoldására.

A korábban publikált esettanulmányunk tapasztalatai alapján járjuk körbe a statikus tartalmak dinamizálásának lehetőségeit.

Dinamikus funkciók megvalósítása a build idejében

Biztos, hogy minden dinamikus a funkciót weblap-lekérésenként újra és újra meg kell megvalósítani?

Sok esetben a feladatot az oldalgenerátorra bízhatjuk, mivel a dinamizmus nem igényel felhasználóktól származó adatot vagy ha igényel is, viszonylag kis vagy véges számú lehetőség jöhet számításba.

Így a CMS rendszerben még dinamikusnak számító funkció a publikus szerveren statikussá tehető.

  • I18N: ha az egyes nyelvi verziókhoz tartozó lapokat külön-külön legeneráljuk, a statikus állományokban már nem marad hivatkozás egy külső lokalizációs táblára.
  • Lapozó: ha ismert egy lista mérete, amelyet csak a tartalomszerkesztők bővíthetnek, akkor a listához tartozó lapozó is statikussá tehető. Mivel elegendő csak a build idejében frissíteni azt, így a lapozóhoz tartozó oldalak is előre és fixen legenerálhatóak. Eközben még szép és struktúrált URL linkeket is használhatunk. Pl.: http://rsm.hu/blog.
  • Időzített oldalmegjelenés: ha egyes oldalakat csak egy előre megadott időponttól tehetjük publikussá, akkor szükségünk lesz arra, hogy a statikus generátort előre ütemezetten tudjuk indítani és programozni tudjuk, hogy mely oldalakról készítheti el a frissített statikus HTML állományokat.
  • Kapcsolódó tartalmak: a build idejében összegyűjthetőek és statikus tartalomként előállíthatóak azok a kapcsolódó elemek, melyek két tartalomszerkesztés között nem változhatnak. Pl. az egyes szerzők vagy kategóriák posztjai. Pl.: http://rsm.hu/blog.
  • Google sitemap XML és rss csatornák: ezek frissítése közvetlen kapcsolatban áll a weboldalak frissítésével. Amikor azt generáljuk, ezeket is újraépíthetjük statikus állományokként, mivel ettől eltérő időpontokban ezek sem változnak.
  • Címkefelhő: amennyiben a címkefelhő a címkéhez tartozó cikkek számától függően hízlalja a címkéket, ez két szerkesztői művelet között statikusnak tekinthető és így szintén generálható. Pl: http://oktataskepzes.tka.hu/hu/crocoos

Dinamizálás a böngészőben

JavaScript segítségével is készíthetünk dinamikus funkciókat az amúgy szerver oldali háttérrel nem rendelkező statikus tartalmakban. Természetesen olyan funkciót ne próbáljunk a böngészőben megvalósítani, amely nélkül az oldal használhatatlan vagy a keresők számára feldolgozhatatlan lesz, mivel a böngésző oldali szkriptek letilthatóak. Több esetben viszont ez a korlát a kockázatával együtt is vállalható, az egyik általunk is alkalmazott megoldás:

  • Lapon belüli szűrés és keresés: a böngészőben akár egy nem túl nagy lista szűrhetőségét is megteremthetjük. A kigenerált statikus tartalom egy lapon belül tartalmazza a teljes listát és a betöltés után, a böngészőben futtatott szkripttel valósítjuk meg a szűrés dinamikus lehetőségét. Például: http://rsm.hu/kisokos

Dinamizálás külső API használatával

Vannak esetek, amikor felhasználói állapotokat és adatokat is kezelnünk kell. Ezekhez már mindenképpen szükségünk lesz dinamikus, szerver oldali programokra és legtöbbször egy adatbázis vagy levélküldő kiszolgáló elérésére is. Amikor ezek a funkciók felmerülnek, alapvetően már feszegetjük a statikus generálású oldalak korlátait és technológiai határait.

Nem szükséges ugyanakkor, hogy ezeket a szerver oldali programokat együtt hosztoljuk a statikus honlapunkkal, a megvalósításuk terhét sem kell feltétlenül a vállunkra venni. Nagyszerű külső szolgáltatások vannak, amelyeket egy-egy statikus beágyazó kóddal egyszerűen be tudunk építeni oldalainkba, így dinamikus funkciókkal egészíthetjük ki az alapvetően statikus lapjainkat.

Mi az alábbi megoldásokat használtuk eddig projektjeinkben, mindegyik jól dokumentált API-val rendelkezik:

Egyedi alkalmazás, egyedi API és beágyazókód

Egyedi esetekben saját célalkalmazást készítettünk, amely egy, a statikus honlaptól független host-on, általunk meghatározott API felületen valósított meg egy-egy speciális funkciót. Mi eddig az alábbi modulokra adtunk ilyen megoldást:

  • Szöveges kereső
  • Ajánlott vagy kapcsolódó tartalmak box
  • Ajánlatkérő űrlap

Minden szinkron vagy aszinkron AJAX híváson alapuló megoldás esetén mérlegelni kell, hogy ezek alkalmazásával mennyire sérül az oldalak használhatósága és legfőképpen keresőoptimalizáltsága, hiszen a betöltési sebesség és a biztonsági szint növelése csak akkor értékelhető sikerként, ha eközben nem szenvedünk el felhasználói élmény és SEO hatékonyság-csökkenést.


A konklúziónk, hogy nem kell azonnal lemondanunk a statikus generálás használatának lehetőségéről, ha egy-egy általánosan megszokott dinamikus funkció igényével találjuk szembe magunkat.