S toľkými možnosťami na výber je vykresľovanie témou, o ktorej musíte mať prehľad.
Moderné webové rámce ponúkajú veľa možností, ako doručiť stránku alebo aplikáciu zo servera na klienta. HTML môžete vygenerovať na oboch stranách alebo ho predbežne vykresliť na vysokorýchlostnú distribúciu prostredníctvom siete na doručovanie obsahu.
Rozhodovanie o štruktúre webu alebo aplikácie závisí od niekoľkých rôznych faktorov. Musíte si byť vedomí toho, ako budú návštevníci pristupovať k vašej stránke alebo aplikácii. Mali by ste pochopiť, či rýchlosť načítania záleží viac na počiatočnom načítaní alebo následnej navigácii. Zvážte tiež, ako často budete web aktualizovať.
Berte do úvahy všetky tieto faktory, aby ste zvážili výhody a nevýhody každej paradigmy vykresľovania.
Vykresľovanie webových stránok viacerými spôsobmi
Vykresľovanie webovej lokality sa týka procesu, pri ktorom sa webová lokalita zobrazuje vo webovom prehliadači. Existuje mnoho rôznych spôsobov, ako pristupovať k procesu prevodu nespracovaných údajov do formátovaného HTML na obrazovke používateľa.
Každá metóda má svoje klady a zápory a poznanie výhod a nevýhod každej z nich vám môže pomôcť pri výbere tej správnej pre vašu stránku.
CSR: Prehliadač preberá zodpovednosť
CSR je skratka pre Client Side Rendering. Keď vykreslíte klientsku stranu aplikácie alebo lokality, server odovzdá iba malý alebo žiadny kód HTML okrem malého kúsku štandardného kódu. Stránka si potom po načítaní stránky vyžiada zo servera všetky potrebné údaje prostredníctvom požiadaviek AJAX.
Keď aplikácia alebo stránka vykresľuje stranu klienta, server odovzdá klientovi skript, ktorý vygeneruje kód HTML v prehliadači klienta. To umožňuje jednostránkové aplikácie, ktoré pri interakcii s nimi neobnovujú prehliadač.
Aplikácie CSR sa pri navigácii často načítavajú rýchlo, ale spočiatku sa môžu načítavať pomaly. Rýchlosť bude do značnej miery závisieť od rámca, ktorý si vyberiete na vykresľovanie, a od toho, koľko ďalších knižníc a doplnkov použijete. Väčšina populárne moderné rámce JavaScriptu zahŕňajú možnosť CSR.
Stránky a aplikácie plne vykreslené na strane klienta trpia neschopnosťou prejsť priamo na danú stránku pomocou adresy URL. Keď sa aplikácia vykreslená na strane klienta prvýkrát spustí, bez ohľadu na zadanú adresu URL prejde do rovnakého počiatočného bodu.
SSR: Rendering na centrálnom serveri
SSR je skratka pre Server Side Rendering. Ide o oveľa tradičnejšiu formu vykresľovania webových stránok, pri ktorej stránky generujú HTML na základe šablón a odosielajú klientovi zmes HTML, šablón so štýlmi a skriptov. Vačšina z najpopulárnejšie backendové webové rámce spadajú do tejto kategórie.
Aplikácie a lokality vykreslené na strane servera majú zvyčajne rýchlejšie počiatočné načítanie, ale každá nasledujúca navigácia bude vyžadovať úplné obnovenie. To znamená, že to nielenže bude trvať dlhšie, ale vývojári pracujúci s SSR budú musieť brať do úvahy správu relácií.
Najväčšou výhodou stránok a aplikácií generovaných SSR je konzistentnosť navigácie po ceste. Používateľ, ktorý zadá danú cestu, bude presmerovaný priamo na požadovanú stránku. Niektoré rámce spravujú presmerovania používateľov zo stránky na stránku v rámci aplikácie, ale používatelia nemusia mať pôvodne prístup k požadovanej stránke.
Mnoho moderných rámcov ponúka kombinované riešenia, ktoré začínajú poskytovaním serverom vykreslenej stránky klientovi. Po načítaní stránky nastane udalosť známa ako hydratácia, pri ktorej sú udalosti skriptu na strane klienta pripojené k ovládacím prvkom stránky. Odteraz klient ovláda akúkoľvek navigáciu.
Zmiešaná dynamika ponúka používateľom možnosť prejsť priamo na ľubovoľnú stránku v aplikácii, pričom stále dostáva rýchlosť a plynulosť jednostránkovej aplikácie. Next.js ponúka viacero modelov vykresľovania, rovnako ako Nuxt.js a Sveltekit.
SSG: Minimalizované vykresľovanie
SSG alebo Static Site Generation obchádza potrebu generovať HTML na strane klienta alebo servera. Namiesto toho weby a aplikácie v štýle SSG predkompilujú každú stránku, ktorú by mohli potrebovať, a výsledky posielajú do CDN na rýchle doručenie.
Ide o mimoriadne efektívny spôsob poskytovania webových stránok extrémne rýchlo. Výsledky sa zvyčajne zostavujú do jednoduchých balíkov obsahujúcich všetky HTML a šablóny so štýlmi potrebné pre individuálnu stránku. Tieto balíky sú udržiavané čo najkompaktnejšie, aby sa zabezpečilo, že ich používateľ dostane čo najrýchlejšie.
Stránky SSG majú tendenciu ponúkať výnimočne rýchle rýchlosti načítania, napriek tomu, že vyžadujú obnovenie pre každú navigáciu. Hlavnou nevýhodou statickej stránky je však nedostatok flexibility. Vysoko dynamické systémy, ako sú aplikácie sociálnych médií alebo komplexné platformy elektronického obchodu, si budú vyžadovať oveľa viac zmien, než dokáže SSG ľahko zvládnuť.
Mnoho statických stránok bude tiež vyžadovať väčšie množstvo režijných nákladov na zmenu, pretože každú novú zmenu bude potrebné skompilovať nezávisle. Vďaka tomu je vykresľovanie v štýle SSG zlou voľbou pre stránky, ktoré sa rýchlo menia, ako je napríklad digitálny obchod s rýchlo sa meniacim inventárom alebo aplikáciami sociálnych médií.
ISR: Trochu zo všetkého
ISR je jednoducho najkomplexnejší typ vykresľovania, ale aj najužitočnejší, čo znamená Incremental Static Regeneration. ISR spája rýchlosť a škálovateľnosť staticky generovaných stránok s reaktivitou SSR a aplikácií v štýle CSR.
Keď sa na stránke alebo v aplikácii v štýle ISR požaduje ľubovoľná stránka, server najprv skontroluje, či neexistuje verzia stránky, ktorej platnosť vypršala. Ak existuje, server okamžite zobrazí stránku uloženú vo vyrovnávacej pamäti.
Ak verzia stránky vo vyrovnávacej pamäti neexistuje alebo od jej vygenerovania uplynul dostatok času, server vygeneruje novú verziu. Táto nová verzia bude odovzdaná klientovi a uložená do vyrovnávacej pamäte pre budúce použitie.
Tento typ vykresľovania je zložitejší na nastavenie, ale automatizuje väčšinu problémov, s ktorými sa stránky SSG bežne stretávajú. To umožňuje aplikáciám ponúkať rýchlosť a spoľahlivosť staticky generovanej aplikácie a zároveň automatizovať ďalšie režijné náklady.
Viaceré moderné frameworky už ponúkajú možnosť vykresľovania v štýle ISR. Mnoho ďalších má podporu pre postupnú generáciu vo vývoji. Väčšina hlavných rámcov bude čoskoro podporovať vykresľovanie ISR, ak to ešte nie je.
Ktorý typ vykresľovania je najlepší?
Existuje niekoľko spôsobov, ako vykresliť webovú stránku alebo aplikáciu. Každý z týchto štyroch typov vykresľovania má viacero variácií. Žiadny typ vykresľovania nie je ideálny pre všetky projekty a aký typ si vyberiete, bude závisieť od toho, čo je na vašom webe alebo v aplikácii najdôležitejšie.
Pri výbere zobrazovacej paradigmy pre váš projekt je dôležité zvážiť rýchlosť, ako vaše publikum použije váš projekt a ako často sa bude stránka meniť. Toto budú hlavné princípy, ktoré vám pomôžu rozhodnúť o najlepšom spôsobe štruktúrovania vášho webu alebo aplikácie.
