Beide renderingmethoden hebben voor- en nadelen. Het is aan de ontwikkelaar om te beslissen welke methode hij of zij gebruikt en welke het beste bij de situatie past. Hieronder volgen enkele voordelen van Vue aan de clientzijde ten opzichte van Nuxt.
Verschillende denkwijzen
Zoals gezegd, gebruiken Nuxt en Vue volledig verschillende manieren om logica af te handelen. Vue is de betere optie, dankzij de werking aan de clientzijde.Om te beginnen kan de gemengde werking van Nuxt de onderliggende oorzaak zijn van diverse problemen. Dit wordt het best uitgelegd aan de hand van een eenvoudig voorbeeld: DOM-elementen (Document Object Model). Stel dat je direct na het laden van de app een van de DOM-elementen wilt selecteren. Of de DOM nu aan de client- of serverzijde werkt, één ding is zeker: Node.js ondersteunt geen DOM-elementen.
Dit is de belangrijkste reden waarom Nuxt cookies gebruikt in plaats van lokale opslag – zonder DOM-ondersteuning zijn cookies de beste optie. Deze methode, hoewel in het verleden veel gebruikt, is tegenwoordig sterk verouderd, waardoor Vue over het algemeen een betere keuze is voor client-side bewerkingen.
Ja, cookies zijn altijd toegankelijk en worden lokaal opgeslagen, maar het laden ervan kan even duren, wat een nadeel is van server-side bewerkingen. Met Vue zul je dit soort problemen daarentegen niet tegenkomen. Het draait altijd aan de clientzijde, wat de zaken een stuk eenvoudiger maakt.
Een voorbeeld
Als ontwikkelaar (of iemand die geïnteresseerd is in ontwikkeling) zul je een verduidelijkend voorbeeld waarschijnlijk waarderen.Stel, je hebt code die verantwoordelijk is voor het beheren van socketverbindingen. Als je dit op de server uitvoert, is het bijwerken van de DOM bij het ontvangen van socketgebeurtenissen onmogelijk – de serverzijde ondersteunt geen DOM-elementen. Dit "probleem" kun je omzeilen.
Snelheid is echter cruciaal voor moderne webontwikkeling, en je wilt niet steeds dingen aan- of uitzetten.
Als je hetzelfde probeert te doen in Vue, hoef je geen andere code in te voeren. Sterker nog, de code zou hetzelfde zijn... of bijna, omdat je het gedeelte met de vroege terugkeer niet nodig hebt. Hoe kan dat? Het proces moet aan de clientzijde worden uitgevoerd, dus er is geen noodzaak om statements te controleren.
De voordelen van client-side rendering
Wat dit betreft is het glashelder. Vue werkt uitsluitend aan de clientzijde en Nuxt wisselt tussen de server en de client.Hoewel server-side rendering voordelen heeft, laten we eerst de clientzijde bekijken.
Pagina herladen
Het belangrijkste voordeel van client-side rendering is dat je niet hoeft te wachten tot je pagina volledig opnieuw is geladen. Je hoeft de hele pagina niet opnieuw te renderen als je dat niet wilt. Dit lijkt misschien niet zo essentieel, maar als je veel elementen hebt, wil je misschien dat een deel van de pagina wordt bijgewerkt in plaats van de hele pagina. Dit maakt de client-side rendering gebruiksvriendelijker dan het servergebaseerde alternatief.Dit is vooral belangrijk bij trage internetverbindingen. Als een gebruiker bijvoorbeeld uw website probeert te openen met behulp van data, profiteert hij of zij van lazy loading, waarbij slechts kleine hoeveelheden data worden geladen terwijl de gebruiker door de pagina scrollt.
Snelheid
U hebt waarschijnlijk wel eens gehoord dat client-side bewerkingen sneller zijn. Dit komt doordat templates, bedrijfslogica en andere data volledig worden geladen. In plaats van te moeten communiceren met de hoofdserver, wordt de webpagina-informatie lokaal opgeslagen. Hierdoor kan een pagina snel laden, tenzij u iets voor de eerste keer bezoekt.Feedback
Meer animaties lijken misschien resource-intensief. Soms kunnen geavanceerde animatieopties echter helpen om de gebruiker de nodige feedback te geven. Het beste voorbeeld is de mogelijkheid om u te laten weten dat de pagina niet is vastgelopen en werkt.Het klinkt misschien niet als veel, maar het kan erg frustrerend zijn om niet te weten of een pagina aan het laden is of is vastgelopen. Dit is mogelijk dankzij moderne UI-frameworks, die niet direct beschikbaar zijn voor server-side frameworks.
Eenvoudigere gebruikersinteractie
Stel dat een gebruiker een artikel uit zijn winkel wil verwijderen. Het artikel is uitverkocht en het grijs maken ervan zou de visuele functionaliteit van de webwinkel verbeteren. Dit is niet onmogelijk aan de serverzijde. Deze actie vereist echter extra codeonderhoud (zowel aan de client- als aan de serverzijde). Dit vertaalt zich in arbeidskosten en complicaties. Bij client-side bewerkingen hoeft de client alleen maar een artikel grijs te maken.Houd er rekening mee dat dit niet beperkt is tot het grijs maken van artikelen. Elke vergelijkbare update op server-side paginaʼs vereist extra interactie.
Voordelen van de serverzijde
Sommige mensen kiezen om twee belangrijke redenen voor de serverzijde. Ten eerste kunnen meer geavanceerde webwinkels een combinatie van beide soorten bewerkingen vereisen. Het tweede voordeel is dat statische websites nog steeds bestaan, en zolang dat het geval is, is server-side scripting de betere oplossing.Met client-side scripting krijg je veel hulp bij SEO. Het is moderner en het werkt, mits je gebruikers een goede internetverbinding hebben.
Maar wat als de doelgroep van de klant voornamelijk mobiele gebruikers zijn? Natuurlijk levert Vue betere, meer dynamische paginaʼs op. Maar zodra een gebruiker verbinding maakt met data, wordt het lastig. Zeker als ze de site voor het eerst laden. Dit is geen probleem met server-side compilatie. De pagina laadt snel en je kunt vrijwel direct navigeren. Dit is iets wat client-side compilatie niet snel zal evenaren.
Er zijn ook compatibiliteitsproblemen. Servergebaseerde bewerkingen zijn over het algemeen robuuster. Zie het als een gigantisch transportschip. Het is traag, moeilijk te bedienen, maar stabiel. Client-side frameworks zoals Nuxt zijn misschien modern, snel en zien er geweldig uit, maar ze kunnen compatibiliteitsproblemen met browsers ondervinden.
Aan de andere kant vereisen de meeste moderne behoeften een gemakkelijk toegankelijke en esthetisch aantrekkelijke webpagina, en dat is precies waar client-side frameworks zoals Vue in uitblinken.
Is snelheid zo belangrijk?
Als je erover nadenkt, lijkt het belangrijkste voordeel van server-side rendering de snelheid te zijn. Client-side frameworks brengen je weliswaar sneller naar een eerder bezochte pagina, maar ze zijn aanzienlijk trager bij een volledig nieuwe webpagina.Maar je moet je afvragen of het er echt toe doet. Snelheid is zeker belangrijk, maar over wat voor soort verschillen hebben we het dan? Zelfs met client-side bewerkingen zou je niet meer dan één seconde laadtijd moeten verwachten. Sterker nog, zelfs als een apparaat niet met wifi is verbonden, kan dataverkeer het nog steeds aan.
Houd er rekening mee dat we het hebben over het tijdperk van 4G- en 5G-technologie. Tenzij je je in de middle of nowhere bevindt, zul je niet veel verschil merken tussen laadtijden aan de server- en clientzijde.
Magento 2 versus Nuxt
Waar Magento 2 is gebaseerd op Vue, dat aan de clientzijde werkt, gebruikt Nuxt een combinatie van beide. Dus waarom zou je niet voor de laatste kiezen? Je hebt dan immers de keuze, toch?Niet helemaal. Met Nuxt profiteer je van de voordelen van een universele app, maar zonder de problemen die een server met zich meebrengt, wat geweldig is. Voeg daar de opties voor automatische serverupdates, het maken van componenten in één bestand en automatische code-splitting aan toe, en je krijgt een behoorlijk goed framework.
Het probleem is echter dat Nuxt meer onderhoud vereist. Dit is iets wat een eindgebruiker niet zal waarderen. Bovendien zijn er alle andere voordelen van client-side compilatie.
Je kunt Nuxt niet alleen als client-side oplossing gebruiken. Het vereist een combinatie van server- en client-side gebruik. Vue is populair, maar niet alomtegenwoordig.
