Introductie tot navigatie in NextJS
In dit gedeelte van de tutorial gaan we het hebben over het werken met links in NextJS.
Laten we eerst bespreken wat er zo bijzonder is aan links. We zullen ernaar kijken in verschillende benaderingen voor het maken van een website.
Website in React
Stel, je hebt een website in React. Zoals bekend is React een SPA - een website waar de gebruiker altijd op één pagina blijft. Je kunt React Router aansluiten en de gebruiker zal denken dat hij over verschillende pagina's navigeert, terwijl hij fysiek op één bestand blijft.
Hierbij zal de gebruiker klikken op links, het zal hem lijken alsof hij op een andere pagina terechtkomt, maar de website-pagina in de browser zal niet opnieuw laden - React zal dynamisch vormen wat de gebruiker op het scherm ziet.
In een dergelijk schema krijgt de gebruiker de lay-out van de website bij het eerste bezoek aan de pagina, en daarna wisselen delen van de website gewoon via JavaScript. Hierbij kan de website data van de server opvragen via AJAX.
Deze aanpak vermindert de belasting van de hosting (wiens resources ons geld kosten), en ook de belasting van de internetverbinding van de gebruiker.
Maar deze aanpak heeft een nadeel - het probleem met SEO. Het lijkt erop dat de website een set links heeft, en in de adresbalk verandert er iets, en je kunt zelfs een link naar een specifieke pagina van de website doorsturen via een messenger. Echter, de inhoud van de pagina wordt dynamisch gevormd op de client en zoekmachines zijn niet in staat dit te verwerken. Daarom zal een dergelijke website niet gevonden worden.
Niet alle websites zijn echter bedoeld voor promotie in zoekmachines. En als de jouwe dat niet is, dan is dit schema best werkbaar voor jou.
Website op de backend
Stel dat je website is gemaakt met een van de backend-talen. Bijvoorbeeld, met PHP.
In dit geval, wanneer de gebruiker op links klikt, zal de website-pagina elke keer volledig laden.
Het probleem is dat een substantieel deel van de pagina al bij de gebruiker aanwezig is. Immers, zoals je al weet, op de pagina verandert meestal alleen de content en metadata, en al het andere blijft ongewijzigd.
Waarom zouden we de rest dan downloaden, als alleen de content is veranderd? Dit creëert een verhoogde belasting voor de server en de internetverbinding.
Er is nog een probleem. Stel dat op de pagina die we ontvangen, in de content een lijst met producten staat, zoals in een webwinkel. Uiteraard heeft elk product dezelfde opmaak. Het zou optimaler zijn om alleen de productdata en de sjabloon voor weergave van het product te downloaden. En vervolgens op de client elke product in dit sjabloon weer te geven. Maar wij downloaden de producten samen met de herhalende opmaak van het product.
Samenvattend, als we een website op pure backend hebben, versturen we veel overbodige data over het netwerk.
Echter, in dit geval hebben we geen probleem met SEO. Voor de opgevraagde URL wordt altijd statische inhoud teruggegeven, die begrijpelijk is voor zoekmachines.
Website op NextJS
NextJS combineert beide benaderingen. Wanneer een gebruiker een URL direct intoetst in de adresbalk, dan ontvangt hij statische inhoud van de pagina als antwoord.
Wanneer de gebruiker echter begint te klikken op links op onze website, dan wordt de pagina van de website niet volledig vernieuwd, maar worden de benodigde data voor de gebruiker via AJAX geladen.
Wanneer een zoekmachine over onze website navigeert, ziet hij de voor hem benodigde statische inhoud. En wanneer een gebruiker over onze website navigeert, gedraagt onze website zich als een SPA.
En, het allerbelangrijkste, NextJS voert dit allemaal automatisch uit! Wij hoeven ons daar geen zorgen over te maken - het doet alles zelf. Prachtig!
In de volgende lessen zullen we uitzoeken hoe NextJS te laten werken zoals beschreven.
