CSR, SSR, SSG, ISR: Kako odabrati pravu paradigmu prikazivanja

Moderni web okviri nude mnogo opcija za isporuku stranice ili aplikacije od poslužitelja do klijenta. Možete generirati HTML s obje strane ili ga unaprijed prikazati za distribuciju velikom brzinom kroz mrežu za isporuku sadržaja.

Odlučivanje o tome kako strukturirati web-lokaciju ili aplikaciju ovisi o nekoliko različitih čimbenika. Morate biti svjesni kako će posjetitelji pristupiti vašoj web-lokaciji ili aplikaciji. Trebali biste razumjeti je li brzina učitavanja važnija pri početnom učitavanju ili pri sljedećoj navigaciji. Također razmislite koliko često ćete ažurirati web mjesto.

Imajte na umu sve ove čimbenike kako biste odvagnuli prednosti i nedostatke svake paradigme prikazivanja.

Prikaz web stranica na više načina

Prikaz web stranice odnosi se na proces kojim se web stranica prikazuje u web pregledniku. Postoji mnogo različitih načina za pristup procesu pretvaranja neobrađenih podataka u formatirani HTML na korisničkom zaslonu.

Svaka metoda ima svoje prednosti i nedostatke, a poznavanje prednosti i nedostataka svake može vam pomoći da odaberete pravu za svoju web-lokaciju.

CSR: Preglednik preuzima odgovornost

CSR je kratica za Client Side Rendering. Kada renderirate aplikaciju ili stranicu na strani klijenta, poslužitelj prosljeđuje malo ili nimalo HTML-a osim malog dijela standardnog koda. Stranica zatim traži sve potrebne podatke od poslužitelja, nakon događaja učitavanja stranice, putem AJAX zahtjeva.

Kada se aplikacija ili stranica prikazuje na strani klijenta, poslužitelj prosljeđuje skriptu klijentu koji će generirati HTML u klijentovom pregledniku. To omogućuje aplikacije s jednom stranicom koje ne osvježavaju preglednik kada s njima komunicirate.

CSR aplikacije se često brzo učitavaju u navigaciji, ali se u početku mogu sporo učitavati. Brzina će uvelike ovisiti o okviru koji ste odabrali za renderiranje i o tome koliko dodatnih biblioteka i dodataka koristite. Najviše popularni moderni JavaScript okviri uključuju opciju za CSR.

Stranice i aplikacije prikazane u potpunosti na strani klijenta pate od nemogućnosti izravne navigacije do određene stranice pomoću URL-a. Kada se aplikacija prikazana na strani klijenta prvi put pokrene, bez obzira na uneseni URL, ići će do iste početne točke.

SSR: Prikaz na središnjem poslužitelju

SSR je kratica za Server Side Rendering. Ovo je mnogo tradicionalniji oblik prikazivanja web stranica u kojem web stranice generiraju HTML na temelju predložaka i šalju mješavinu HTML-a, stilskih tablica i skripti klijentu. Većina najpopularniji backend web okviri spadaju u ovu kategoriju.

Aplikacije i web-mjesta prikazana na strani poslužitelja imaju tendenciju bržeg početnog učitavanja, ali svaka sljedeća navigacija zahtijevat će potpuno osvježavanje. To znači da ne samo da će trajati dulje, nego će programeri koji rade sa SSR-om morati uzeti u obzir upravljanje sesijom.

Najveća prednost web-mjesta i aplikacija generiranih SSR-om je dosljednost navigacije putem. Korisnik koji unese zadani put bit će odveden izravno na traženu stranicu. Neki okviri upravljaju preusmjeravanjem korisnika sa stranice na stranicu unutar aplikacije, ali korisnici možda neće moći pristupiti stranici koju žele u početku.

Mnogi moderni okviri nude mješovita rješenja koja počinju posluživanjem poslužiteljski prikazane stranice klijentu. Nakon što se stranica učita, događa se događaj poznat kao hidratacija u kojem se događaji skripte na strani klijenta pridružuju kontrolama stranice. Od sada pa nadalje, klijent upravlja svakom navigacijom.

Pomiješana dinamika nudi mogućnost korisnicima da izravno odu na bilo koju stranicu u aplikaciji, a da i dalje uživaju brzinu i glatkoću aplikacije s jednom stranicom. Next.js nudi više paradigmi renderiranja, kao i Nuxt.js i Sveltekit.

SSG: Minimizirano prikazivanje

SSG ili Static Site Generation zaobilazi potrebu za generiranjem HTML-a na strani klijenta ili poslužitelja. Umjesto toga, web-mjesta i aplikacije u stilu SSG-a unaprijed kompiliraju svaku stranicu koja bi im mogla zatrebati i šalju rezultate na CDN za brzu isporuku.

Ovo je iznimno učinkovit način posluživanja web stranica iznimno brzo. Rezultati se obično sastavljaju u jednostavne pakete koji sadrže sav HTML i stilske tablice potrebne za pojedinačnu stranicu. Ovi paketi su što je moguće kompaktniji kako bi se osiguralo da će ih korisnik primiti što je brže moguće.

SSG web-mjesta obično nude iznimno velike brzine učitavanja, unatoč zahtjevu za osvježavanjem za svaku navigaciju. Međutim, glavna mana statične stranice je nedostatak fleksibilnosti. Vrlo dinamični sustavi kao što su aplikacije društvenih medija ili složene platforme za e-trgovinu zahtijevat će mnogo više promjena nego što SSG može lako podnijeti.

Mnoga statična mjesta također će zahtijevati veću količinu troškova za izmjenu budući da će se svaka nova promjena morati neovisno kompilirati. To čini renderiranje u stilu SSG-a lošim izborom za web-lokacije koje se brzo mijenjaju, poput digitalnog prodajnog izloga s inventarom koji se brzo mijenja ili aplikacija društvenih medija.

ISR: Od svega pomalo

Jednostavno najsloženija vrsta renderiranja, ali i najkorisnija, ISR je kratica za inkrementalnu statičku regeneraciju. ISR spaja brzinu i skalabilnost statički generiranih stranica s reaktivnošću SSR-a i aplikacija u stilu CSR-a.

Kada se zatraži bilo koja stranica na stranici ili aplikaciji u stilu ISR-a, poslužitelj će prvo provjeriti postoji li predmemorirana verzija stranice koja nije istekla. Ako postoji, poslužitelj će odmah poslužiti predmemoriranu stranicu.

Ako predmemorirana verzija stranice ne postoji ili je prošlo dovoljno vremena od njezinog stvaranja, poslužitelj će generirati novu verziju. Ova nova verzija bit će proslijeđena klijentu i pohranjena u predmemoriju za buduću upotrebu.

Ovu vrstu prikazivanja složenije je postaviti, ali automatizira većinu problema s kojima se inače susreću SSG stranice. To aplikacijama omogućuje da ponude i brzinu i pouzdanost statički generirane aplikacije dok automatiziraju dodatne troškove.

Nekoliko modernih okvira već nudi opciju renderiranja u ISR stilu. Mnogo ih više ima podršku za postupno stvaranje u razvoju. Većina velikih okvira uskoro će podržavati ISR ​​renderiranje ako već ne podržavaju.

Koja je vrsta prikazivanja najbolja?

Postoji nekoliko načina za renderiranje web stranice ili aplikacije. Svaka od ove četiri vrste iscrtavanja ima više varijacija. Nijedna vrsta renderiranja nije idealna za sve projekte, a koju ćete vrstu odabrati ovisit će o tome što je najvažnije na vašoj web-lokaciji ili u aplikaciji.

Prilikom odabira paradigme prikazivanja za vaš projekt, važno je uzeti u obzir brzinu, kako će vaša publika koristiti vaš projekt i koliko često će se stranica mijenjati. Ovo će biti primarna načela koja će vam pomoći da odlučite o najboljem načinu strukturiranja svoje web-lokacije ili aplikacije.