Čo je renderovanie?

Keď otvoríte webstránku v prehliadači, prehliadač ju vykreslí (renderuje). Keď na stránke interagujete – scrollujete, klikáte, meníte veľkosť okna alebo otáčate telefón – prehliadač ju musí často vykresliť znovu. Ale čo vlastne znamená toto renderovanie?

Renderovanie môže mať v rôznych kontextoch rôzne významy. 3D grafika je napríklad renderovaná, ale to je úplne odlišné od toho, o čom budeme hovoriť dnes. Dokonca aj renderovanie webstránky prehliadačom je len čiastočne spojené s našou dnešnou témou.

Zameriame sa na renderovanie webstránok z pohľadu ich vlastníka. Jednoducho povedané, renderovanie v tomto kontexte je proces vkladania dát do šablóny. Existujú rôzne stratégie, kde a kedy sa to deje.

Stratégie renderovania

V dávnych časoch ľudia zvyčajne vytvárali HTML súbory priamo a nahrávali ich na webový priestor alebo server, odkiaľ boli poskytované používateľom. Keď sa však pozriete na webstránky, často si všimnete podobné stránky s rôznym obsahom, ale presne rovnakou štruktúrou – napríklad detaily produktov alebo články.

Proces môžeme vylepšiť oddelením štruktúry stránky v súboroch šablón a samostatným ukladaním a upravovaním obsahu. Potom použijeme program na vloženie obsahu do príslušných šablón.

Pre-renderovanie (Statické generovanie stránok)

Ako príklad môžete použiť generátory statických stránok ako Jekyll, Hugo, Gatsby a ďalšie. Keď vytvoríte nový obsah alebo upravíte existujúci, spustíte program na vytvorenie nových HTML súborov na základe tohto obsahu a šablón. Potom tieto súbory nahráte na svoj server.

Táto metóda má niekoľko výhod:

• Je to veľmi jednoduchý spôsob vytvorenia webstránky
• Nepotrebujete veľa práce na nastavenie servera
• Je veľmi robustná a bezpečná, pretože so serverom neprebieha veľa interakcií

Nevýhodou je, že musíte spustiť program niekde (na počítači alebo telefóne) a musíte to robiť zakaždým, keď sa na vašej webstránke niečo zmení. Taktiež nemôže reagovať na interakcie od vašich návštevníkov, čo obmedzuje možnosti vašej webstránky.

Server-side rendering (SSR)

Pri server-side renderovaní sa program, ktorý vkladá obsah do šablón, presunie z vášho počítača na server, ktorý spracováva požiadavky od návštevníkov. Server spustí program a ten rozhodne na základe URL, cookies návštevníka a ďalších vecí, aký obsah vložiť do ktorej šablóny a vráti ho prehliadaču používateľa.

Výhody SSR:

• Môže reagovať na stav prihlásenia používateľa
• Reaguje na akcie používateľa ako prihlásenie, vytvorenie účtu alebo prihlásenie sa na odber newslettra
• Môže vytvárať nový obsah na základe interakcie používateľov (komentáre, recenzie, hodnotenia)

Nevýhody:

• Nastavenie je o niečo zložitejšie a vyžaduje viac práce na udržanie bezpečnosti
• Je náročnejšie na zdroje, pretože sa program spúšťa a stránka sa renderuje pri každej návšteve

Interakcie sú pri SSR trochu obmedzené – odoslanie komentára spôsobí krátke bliknutie prázdnej stránky, pretože sa stránka v prehliadači v podstate znovu načíta, čo nepôsobí príjemne. V závislosti od toho, ako často sa mení obsah, môžete použiť cache na zabránenie dodatočnému renderovaniu pri každom návštevníkovi.

Client-side rendering (CSR)

Existuje aj spôsob vytvárania webstránok, ktoré sú viac podobné aplikáciám. Sú určené na vysokú interaktivitu a môžu ponúkať funkcie ako navigácia geografických dát alebo vykonávanie komplexných úloh ako 3D modelovanie či úprava videa.

Pri CSR server pošle šablónu a potom použije program (zvyčajne JavaScript), ktorý beží v prehliadači návštevníka, aby požiadal váš server o dáta na zobrazenie. Môže to robiť viackrát na pozadí a v reakcii na interakcie používateľa.

Výhody CSR:

• Interakcie pôsobia ako v aplikácii – prebiehajú plynulo na pozadí bez viditeľného obnovenia stránky
• Oddelenie zdroja dát od miesta uloženia šablón
• Možnosť offline dostupnosti vďaka technológiám Progressive Web App

Nevýhody:

• Kód beží v prostredí, ktoré nekontrolujete (zariadenie a prehliadač používateľa)
• Ak kód nefunguje správne, používateľ môže vidieť len časť obsahu alebo žiadny obsah
• Je náročný na zdroje, pretože program beží pri každom zobrazení obsahu návštevníkom

Hlavným problémom CSR je riziko, že v prípade chyby počas prenosu používateľ neuvidí žiadny váš obsah. To môže mať dôsledky aj pre SEO – ak Google Search a iné vyhľadávače nevidia obsah, nemôžu ho indexovať.

Na vyriešenie tohto problému môžete pridať do vášho nastavenia tzv. hydratáciu, ak sa používa CSR. Kombinujete aspekty SSR, keďže primárny počiatočný obsah sa načíta do šablóny na vašom serveri, a iba následné interakcie zahŕňajú CSR.

Hoci to znie ako to najlepšie z oboch svetov, znamená to viac kódu a zložitejšie nastavenie, čo môže viesť k menej robustným skúsenostiam a vyššej údržbe.

Ktorú stratégiu by ste mali vybrať?

Nakoniec to závisí od mnohých faktorov:

• Čo robí vaša webstránka?
• Ako často sa mení obsah?
• Aký typ interakcií chcete podporovať?
• Aké zdroje máte k dispozícii na vybudovanie, prevádzku a údržbu vášho nastavenia?

Posúďte výhody a nevýhody každého prístupu a určite, čo najlepšie vyhovuje vašim cieľom.

Source: https://www.youtube.com/watch?v=XMYrqhdJFxU

The post Čo je to Renderovanie a aké poznáme Stratégie appeared first on Digital Pylon.