Kas iš tikrųjų vyksta, kai spaudžiate nuorodą
Lankantis naujienų portaluose kaip Delfi ar 15min, tikriausiai pastebėjote, kad pereinant tarp straipsnių puslapis nesinaujina taip, kaip būdavo anksčiau – nėra to balto mirksėjimo, kai naršyklė iš naujo krauna viską nuo pradžių. Tai nėra atsitiktinumas ir ne koks nors magiškas triukas. Tai vadinama Single Page Application arba tiesiog SPA – architektūra, kuri šiandien naudojama daugelyje didelių naujienų svetainių.
Tradicinis puslapis veikia paprastai: paspaudžiate nuorodą, naršyklė siunčia užklausą į serverį, serveris grąžina visą HTML dokumentą, naršyklė jį atvaizduoja. Kiekvieną kartą iš naujo. SPA atveju viskas kitaip – puslapis įkeliamas vieną kartą, o toliau tik keičiasi jo turinys.
JavaScript kaip pagrindinis variklis
SPA širdis – JavaScript. Kai pirmą kartą atidaro naujienų portalą, naršyklė parsisiunčia ne tik HTML, bet ir gana didelį JavaScript failų paketą. Šis kodas perima valdymą: stebi, ką vartotojas spaudžia, ir kai reikia naujo turinio – pats kreipiasi į serverį per API, gauna tik duomenis (dažniausiai JSON formatu), ir atnaujina tik tą puslapio dalį, kurią reikia.
Pavyzdžiui, paspaudus ant sporto naujienos, JavaScript siunčia užklausą kažką panašaus į GET /api/articles/12345, serveris grąžina straipsnio tekstą, nuotraukas, metaduomenis – ir viskas. Jokio pilno puslapio perkrovimo. Antraštė, meniu, šoninė juosta lieka nepaliesti.
Kaip naršyklė „mano”, kad keičiasi puslapis
Čia įsijungia kitas mechanizmas – History API. Naršyklės adreso juostoje matote, kad URL tikrai keičiasi, tarkime iš / į /sportas/futbolas/straipsnis. Bet puslapis neperkraunamas. Tai JavaScript daro naudodamas history.pushState() metodą – jis atnaujina URL be realaus navigavimo.
Dėl to veikia ir mygtukas „Atgal”. SPA turi savo vidinį maršrutizatorių, kuris klauso naršyklės istorijos pokyčių ir atitinkamai rodo reikiamą turinį. Populiariausios bibliotekos tam – React Router, Vue Router ar Angular Router.
Virtualus DOM ir kodėl jis svarbus
Dauguma šiuolaikinių SPA naudoja React, Vue arba Angular. Šios bibliotekos įvedė sąvoką „virtualus DOM” – tai tarsi lengva puslapio struktūros kopija atmintyje. Kai gaunami nauji duomenys, biblioteka pirmiausia palygina, kas pasikeitė virtualioje kopijoje, ir tik tada atnaujina realų puslapį – tik tose vietose, kur tikrai reikia.
Naujienų portalo kontekste tai reiškia, kad jei atsinaujina tik komentarų skaičius po straipsniu, naršyklė neperpiešia viso puslapio – tik tą vieną skaičių. Tai ir greičiau, ir mažiau apkrauna procesorių.
Serverio pusė: ne tik duomenų tiekėjas
Nors SPA logika gyvena naršyklėje, serveris irgi turi savo vaidmenį. Naujienų portalai dažnai naudoja Server-Side Rendering (SSR) arba Static Site Generation (SSG) – bent pirmajam puslapio įkrovimui. Kodėl? Nes grynai kliento pusės SPA turi problemą su paieškos sistemomis – Google robotas ne visada gerai susidoroja su JavaScript generuojamu turiniu.
Todėl pirmą kartą atidarant straipsnį, serveris gali grąžinti jau paruoštą HTML su visu tekstu, o JavaScript vėliau „perima” valdymą – tai vadinama hidratacija. Vartotojas mato turinį iš karto, o ne laukia, kol JavaScript suveiks.
Kaina, kurią moka vartotojas (ir kūrėjas)
SPA nėra tobulas sprendimas. Pirmasis įkrovimas gali būti lėtesnis, nes reikia parsisiųsti visą JavaScript paketą. Naujienų portalai su tūkstančiais straipsnių turi kruopščiai rūpintis kodo skaidymu – techniniu terminu „code splitting” – kad vartotojas parsisiųstų tik tai, ko jam šiuo metu reikia.
Kūrėjams tai reiškia papildomą sudėtingumą: reikia valdyti būseną (kas rodoma, kokie duomenys įkrauti), rūpintis atminties nutekėjimais, užtikrinti, kad naršyklės mygtukas „Atgal” veiktų teisingai.
Technologijų mozaika, kurią matote kiekvieną dieną
Visa ši architektūra – JavaScript, History API, virtualus DOM, SSR, API užklausos – veikia kartu kaip gerai suderintas mechanizmas. Kiekvieną kartą, kai sklandžiai pereinate nuo vieno straipsnio prie kito ir puslapis tiesiog „atsinaujina”, o ne perkraunamas iš naujo, tai nėra savaime suprantama. Už to slypi nemažai inžinerinio darbo.
Įdomu tai, kad vartotojas šios technologijos tiesiogiai nemato ir, tiesą sakant, neturėtų matyti – geras SPA yra tas, kuris tiesiog veikia sklandžiai, nepastebimai. O kai kažkas sulėtėja ar sutrinka, tada tik pradedame galvoti, kaip visa tai iš tikrųjų veikia.