CSR, SSR, SSG, ISR: Cum să alegeți paradigma de redare potrivită

Cadrele web moderne oferă multe opțiuni despre cum să livrezi un site sau o aplicație de la server la client. Puteți genera HTML pe ambele părți sau îl puteți pre-renda pentru distribuție de mare viteză printr-o rețea de livrare de conținut.

Decizia cum să structurați un site sau o aplicație se bazează pe câțiva factori diferiți. Trebuie să știți cum vă vor accesa vizitatorii site-ul sau aplicația. Ar trebui să înțelegeți dacă viteza de încărcare contează mai mult la încărcarea inițială sau la navigarea ulterioară. Luați în considerare, de asemenea, cât de des veți actualiza site-ul.

Țineți cont de toți acești factori pentru a cântări avantajele și dezavantajele fiecărei paradigme de randare.

Redarea site-urilor web în mai multe moduri

Redarea unui site web se referă la procesul prin care un site web este afișat într-un browser web. Există o mulțime de moduri diferite de a aborda procesul de conversie a datelor brute în HTML formatat pe ecranul unui utilizator.

Fiecare metodă are avantajele și dezavantajele sale, iar cunoașterea avantajelor și dezavantajelor fiecăreia vă poate ajuta să alegeți cea potrivită pentru site-ul dvs.

CSR: Browserul preia controlul

CSR înseamnă Client Side Rendering. Când redați o aplicație sau o parte a clientului de site, serverul transmite puțin sau deloc HTML, cu excepția unei mici bucăți de cod standard. Pagina solicită apoi orice date de care are nevoie de la server, după evenimentul de încărcare a paginii, prin solicitări AJAX.

Când o aplicație sau o pagină redă partea clientului, serverul transmite clientului un script care va genera codul HTML în browserul clientului. Acest lucru permite aplicații cu o singură pagină care nu reîmprospătează browserul atunci când interacționați cu ele.

Aplicațiile CSR se încarcă adesea rapid în navigare, dar inițial pot fi lent. Viteza va depinde în mare măsură de cadrul pe care îl alegeți pentru a face randarea și de câte biblioteci și suplimente suplimentare utilizați. Cel mai cadre JavaScript moderne populare include o opțiune pentru CSR.

Paginile și aplicațiile redate complet pe partea clientului suferă de imposibilitatea de a naviga direct la o anumită pagină folosind o adresă URL. Când o aplicație redată pe partea clientului pornește pentru prima dată, indiferent de adresa URL introdusă, aceasta va naviga la același punct de pornire.

SSR: Redare pe un server central

SSR înseamnă Server Side Rendering. Aceasta este o formă mult mai tradițională de redare a paginilor web în care site-urile generează HTML pe baza șabloanelor și trimit un amestec de HTML, foi de stil și scripturi către client. Majoritatea cele mai populare cadre web backend intra in aceasta categorie.

Aplicațiile și site-urile redate pe server tind să aibă încărcări inițiale mai rapide, dar fiecare navigare succesivă va necesita o reîmprospătare completă. Aceasta înseamnă că nu numai că vor dura mai mult, dar dezvoltatorii care lucrează cu SSR vor trebui să ia în considerare gestionarea sesiunilor.

Cel mai mare avantaj al site-urilor și aplicațiilor generate de SSR este consecvența navigării în căi. Un utilizator care introduce o anumită cale va fi dus direct la pagina solicitată. Unele cadre gestionează redirecționările utilizatorilor de la o pagină la alta în cadrul aplicației, dar este posibil ca utilizatorii să nu poată accesa pagina pe care o doresc inițial.

Multe cadre moderne oferă soluții combinate care încep prin a oferi clientului o pagină redată de server. Odată ce pagina s-a încărcat, are loc un eveniment cunoscut sub numele de hidratare, în care evenimentele de script la nivelul clientului sunt atașate la comenzile paginii. De aici încolo, clientul se ocupă de orice navigare.

O dinamică combinată oferă utilizatorilor posibilitatea de a merge direct la orice pagină dintr-o aplicație, primind în același timp viteza și fluiditatea unei aplicații cu o singură pagină. Next.js oferă mai multe paradigme de randare, la fel ca și Nuxt.js și Sveltekit.

SSG: Redare minimizată

SSG, sau Static Site Generation, ocolește necesitatea de a genera HTML pe partea client sau server. În schimb, site-urile și aplicațiile în stil SSG precompilează fiecare pagină de care ar putea avea nevoie și împing rezultatele către un CDN pentru livrare rapidă.

Aceasta este o metodă extrem de eficientă de a servi pagini web extrem de rapid. Rezultatele sunt în mod normal compilate în pachete simple care conțin tot HTML și foile de stil necesare pentru o pagină individuală. Aceste pachete sunt păstrate cât mai compact posibil pentru a se asigura că utilizatorul le va primi cât mai repede posibil.

Site-urile SSG tind să ofere viteze de încărcare excepțional de rapide, în ciuda faptului că necesită o reîmprospătare pentru fiecare navigare. Cu toate acestea, dezavantajul major al unui site static este lipsa de flexibilitate. Sistemele foarte dinamice, cum ar fi aplicațiile de social media sau platformele complexe de comerț electronic, vor necesita mult mai multe modificări decât poate face cu ușurință un SSG.

Multe site-uri statice vor necesita, de asemenea, o cantitate mai mare de cheltuieli generale pentru a fi modificate, deoarece fiecare nouă modificare va trebui compilată independent. Acest lucru face ca redarea în stil SSG să fie o alegere proastă pentru site-urile care se schimbă rapid, cum ar fi o vitrină digitală cu inventar în schimbare rapidă sau aplicații de social media.

ISR: Un pic din tot

Cu ușurință cel mai complex tip de randare, dar și cel mai benefic, ISR înseamnă Incremental Static Regeneration. ISR îmbină viteza și scalabilitatea site-urilor generate static cu reactivitatea aplicațiilor în stil SSR și CSR.

Când se solicită orice pagină într-o pagină sau o aplicație în stil ISR, serverul va verifica mai întâi dacă există o versiune în cache a paginii neexpirată. Dacă există, serverul va servi imediat pagina stocată în cache.

Dacă o versiune stocată în cache a paginii nu există sau a trecut suficient timp de la generarea acesteia, serverul va genera o nouă versiune. Această nouă versiune va fi transmisă clientului și stocată în cache pentru utilizare ulterioară.

Acest tip de randare este mai complex de configurat, dar automatizează majoritatea problemelor pe care le întâmpină în mod normal site-urile SSG. Acest lucru permite aplicațiilor să ofere atât viteza, cât și fiabilitatea unei aplicații generate static, în timp ce automatizează îndepărtarea costurilor suplimentare.

Mai multe cadre moderne oferă deja opțiunea de redare în stil ISR. Multe altele au suport pentru generarea incrementală în dezvoltare. Majoritatea cadrelor majore vor sprijini în curând redarea ISR, dacă nu o fac deja.

Ce tip de randare este cel mai bun?

Există mai multe moduri de a reda un site web sau o aplicație. Fiecare dintre aceste patru tipuri de randare are mai multe variații. Niciun tip de randare nu este ideal pentru toate proiectele și tipul pe care îl alegeți va depinde de ceea ce este cel mai important în site-ul sau aplicația dvs.

Atunci când alegeți o paradigmă de randare pentru proiectul dvs., este important să luați în considerare viteza, modul în care publicul dvs. va folosi proiectul dvs. și cât de des se va schimba site-ul. Acestea vor fi principiile primare care vă vor ajuta să decideți cel mai bun mod de a vă structura site-ul sau aplicația.