CSR, SSR, SSG, ISR: hoe u het juiste weergaveparadigma kiest

Moderne webframeworks bieden veel opties voor het leveren van een site of app van server naar client. U kunt aan beide kanten HTML genereren of deze vooraf renderen voor snelle distributie via een content delivery netwerk.

Beslissen hoe een site of app moet worden gestructureerd, is afhankelijk van een aantal verschillende factoren. U moet weten hoe bezoekers toegang krijgen tot uw site of app. U moet begrijpen of de laadsnelheid belangrijker is bij de eerste lading of bij de daaropvolgende navigatie. Bedenk ook hoe vaak u de site gaat updaten.

Houd al deze factoren in gedachten om de voor- en nadelen van elk weergaveparadigma af te wegen.

Websites op meer dan één manier weergeven

Het weergeven van een website verwijst naar het proces waarbij een website wordt weergegeven in een webbrowser. Er zijn veel verschillende manieren om het proces van het converteren van onbewerkte gegevens naar opgemaakte HTML op het scherm van een gebruiker te benaderen.

Elke methode heeft zijn voor- en nadelen, en als u de voor- en nadelen van elke methode kent, kunt u de juiste kiezen voor uw site.

CSR: de browser neemt de leiding

CSR staat voor Client Side Rendering. Wanneer u een app of site-clientzijde weergeeft, geeft de server weinig tot geen HTML door, behalve een klein stukje boilerplate-code. De pagina vraagt ​​vervolgens alle gegevens op van de server, na het laden van de pagina, via AJAX-verzoeken.

Wanneer een app of pagina aan de clientzijde wordt weergegeven, geeft de server een script door aan de client dat de HTML in de browser van de client genereert. Dit maakt toepassingen met één pagina mogelijk die de browser niet vernieuwen wanneer u ermee communiceert.

CSR-apps worden tijdens navigatie vaak snel geladen, maar in het begin kunnen ze langzaam laden. De snelheid hangt grotendeels af van het framework dat u kiest om de rendering uit te voeren en hoeveel extra bibliotheken en add-ons u gebruikt. Meest populaire moderne JavaScript-frameworks een optie voor MVO opnemen.

Volledig aan de clientzijde weergegeven pagina's en apps hebben last van het onvermogen om rechtstreeks naar een bepaalde pagina te navigeren met behulp van een URL. Wanneer een gerenderde app aan de clientzijde voor het eerst wordt gestart, navigeert deze, ongeacht de ingevoerde URL, naar hetzelfde startpunt.

SSR: Rendering op een centrale server

SSR staat voor Server Side Rendering. Dit is een veel traditionelere vorm van webpaginaweergave waarbij sites HTML genereren op basis van sjablonen en een combinatie van HTML, stylesheets en scripts naar de klant sturen. De meerderheid van de meest populaire backend webframeworks vallen in deze categorie.

Server Side Rendered apps en sites hebben de neiging sneller te laden, maar elke volgende navigatie vereist een volledige vernieuwing. Dit betekent niet alleen dat ze langer duren, maar dat ontwikkelaars die met SSR werken ook rekening moeten houden met sessiebeheer.

Het grootste voordeel van door SSR gegenereerde sites en apps is de consistentie van padnavigatie. Een gebruiker die een bepaald pad invoert, wordt rechtstreeks naar de gevraagde pagina geleid. Sommige frameworks beheren gebruikersomleidingen van pagina naar pagina binnen de app, maar gebruikers hebben in eerste instantie mogelijk geen toegang tot de gewenste pagina.

Veel moderne frameworks bieden gemengde oplossingen die beginnen met het aanbieden van een door de server gegenereerde pagina aan de client. Zodra de pagina is geladen, vindt er een gebeurtenis plaats die bekend staat als hydratie, waarbij scriptgebeurtenissen aan de clientzijde worden gekoppeld aan de besturingselementen van de pagina. Vanaf nu regelt de client alle navigatie.

Een gemengde dynamiek biedt gebruikers de mogelijkheid om rechtstreeks naar elke pagina in een app te gaan, terwijl ze nog steeds de snelheid en soepelheid van een applicatie met één pagina ontvangen. Next.js biedt meerdere weergaveparadigma's, net als Nuxt.js en Sveltekit.

SSG: geminimaliseerde weergave

SSG, of Static Site Generation, omzeilt de noodzaak om HTML te genereren aan de client- of serverzijde. In plaats daarvan compileren sites en apps in SSG-stijl elke pagina die ze nodig zouden kunnen hebben vooraf en sturen de resultaten naar een CDN voor snelle levering.

Dit is een uiterst effectieve methode om webpagina's extreem snel weer te geven. De resultaten worden normaal gesproken gecompileerd in eenvoudige bundels die alle HTML en stylesheets bevatten die nodig zijn voor een individuele pagina. Deze bundels zijn zo compact mogelijk gehouden om ervoor te zorgen dat de gebruiker ze zo snel mogelijk ontvangt.

SSG-sites hebben de neiging om uitzonderlijk hoge laadsnelheden te bieden, ondanks dat ze voor elke navigatie moeten worden vernieuwd. Het grootste nadeel van een statische site is echter een gebrek aan flexibiliteit. Zeer dynamische systemen zoals apps voor sociale media of complexe e-commerceplatforms zullen veel meer veranderingen vergen dan een SSG gemakkelijk aankan.

Veel statische sites hebben ook meer overhead nodig om te wijzigen, aangezien elke nieuwe wijziging onafhankelijk moet worden gecompileerd. Hierdoor is weergave in SSG-stijl een slechte keuze voor sites die snel veranderen, zoals een digitale winkel met snel wisselende inventaris of apps voor sociale media.

ISR: Een beetje van alles

Gemakkelijk het meest complexe type weergave, maar ook het meest voordelige, ISR staat voor Incremental Static Regeneration. ISR combineert de snelheid en schaalbaarheid van statisch gegenereerde sites met de reactiviteit van SSR- en CSR-achtige apps.

Wanneer een pagina wordt opgevraagd in een ISR-achtige pagina of app, controleert de server eerst of er een niet-verlopen cacheversie van de pagina is. Als dat zo is, zal de server onmiddellijk de pagina in de cache weergeven.

Als er geen gecachte versie van de pagina bestaat, of als er voldoende tijd is verstreken sinds het genereren ervan, zal de server een nieuwe versie genereren. Deze nieuwe versie wordt doorgegeven aan de client en in de cache opgeslagen voor toekomstig gebruik.

Dit type weergave is complexer om in te stellen, maar het automatiseert de meeste problemen die SSG-sites normaal gesproken ondervinden. Hierdoor kunnen apps zowel de snelheid als de betrouwbaarheid bieden van een statisch gegenereerde app, terwijl de extra overhead wordt weggeautomatiseerd.

Verschillende moderne frameworks bieden al de mogelijkheid van ISR-achtige weergave. Veel meer hebben steun voor incrementele generatie in ontwikkeling. De meeste grote frameworks zullen binnenkort ISR-rendering ondersteunen als ze dat nog niet doen.

Welk type weergave is het beste?

Er zijn verschillende manieren om een ​​website of app weer te geven. Elk van deze vier soorten weergave heeft meerdere variaties. Geen enkel type weergave is ideaal voor alle projecten en welk type u kiest, hangt af van wat het belangrijkste is op uw site of app.

Bij het kiezen van een weergaveparadigma voor uw project, is het belangrijk om rekening te houden met snelheid, hoe uw publiek uw project zal gebruiken en hoe vaak de site zal veranderen. Dit zijn de belangrijkste principes die u zullen helpen bij het bepalen van de beste manier om uw site of app te structureren.