Johdatus navigointiin NextJS:ssä

Tässä oppikirjan osassa puhumme linkkien toiminnasta NextJS:ssä.

Aluksi keskustellaan siitä, mitä erityistä linkeissä on. Katsomme niitä erilaisissa lähestymistavoissa sivuston luomiseen.

React-sivusto

Oletetaan, että sinulla on React-sivusto. Kuten tiedetään, React on SPA - sivusto, jossa käyttäjä pysyy aina yhdellä sivulla. Voit kytkeä päälle React Routerin ja käyttäjä luulee, että hän siirtyy eri sivuille, pysyen fyysisesti yhdellä tiedostolla.

Samaan aikaan käyttäjä napsauttaa linkkejä, hänelle vaikuttaa siltä, että hän pääsee toiselle sivulle, mutta sivuston sivu selaimessa ei lataudu uudelleen - React muodostaa dynaamisesti sen, minkä käyttäjä näkee näytöllä.

Tällaisessa järjestelmässä käyttäjä saa sivuston asettelun ensimmäisellä käynnistyksellä, ja sitten sivuston osat vain vaihtuvat JavaScriptin kautta. Samaan aikaan sivusto voi hakea tietoja palvelimelta AJAXin kautta.

Tämä lähestymistapa vähentää kuormitusta hostingissa (jonka resurssit maksavat rahaa), sekä käyttäjän internet-yhteyden kuormitusta.

Mutta tällä lähestymistavalla on haitta - SEO-ongelma. Vaikka sivustolla on joukko linkkejä, ja osoiterivillä jotain muuttuu, ja voit jopa lähettää linkin tiettyyn sivuston sivuun messengerin kautta. Kuitenkin sivun sisältö muodostetaan dynaamisesti asiakaspuolella ja hakukoneet eivät pysty käsittelemään sitä. Siksi tällainen sivusto ei tule menestymään.

Kaikki sivustot eivät kuitenkaan ole tarkoitettu hakukoneoptimointia varten. Ja jos sinun sivustosi ei ole, tämä järjestelmä on sinulle täysin toimiva.

Backend-sivusto

Oletetaan, että sivustosi on tehty yhdellä backend-kielistä. Esimerkiksi PHP:llä.

Tässä tapauksessa, kun käyttäjä napsauttaa linkkejä, sivuston sivu latautuu kokonaan uudelleen joka kerta.

Ongelmana on, että merkittävä osa sivusta on jo käyttäjällä. Kuten tiedät, sivulla yleensä vaihtuu vain sisältö ja metatiedot, ja kaikki muu pysyy muuttumattomana.

Miksi ladata muu osa, jos on muuttunut vain sisältö? Tämä luo lisääntyneen kuormituksen palvelimelle ja internet-yhteydelle.

On toinenkin ongelma. Oletetaan, että sivulla, joka saadaan, sisällössä on tuotelista, kuten verkkokaupassa. On ilmeistä, että jokaisella tuotteella on sama ulkoasu. Olisi optimaalisempaa ladata vain tuotteiden tiedot, ja tuotteen tulostusmalli. Ja sitten asiakaspuolella tulostaa jokainen tuote tässä mallissa. Mutta lataamme tuotteet toistuvan tuotteen ulkoasun kanssa.

Yhteenvetona, jos meillä on puhdas backend-sivusto, kuljetamme verkon yli paljon turhia tietoja.

Kuitenkin, tässä tapauksessa meillä ei ole SEO-ongelmaa. Haetulle URL-osoitteelle palautetaan aina staattinen sisältö, joka on ymmärrettävissä hakukoneille.

NextJS-sivusto

NextJS yhdistää molemmat lähestymistavat. Kun käyttäjä kirjoittaa URL-osoitteen suoraan osoiteriville, hän saa vastauksena staattisen sivun sisällön.

Kun käyttäjä alkaa napsauttaa sivustomme linkkejä, sivuston sivu ei päivity kokonaan, vaan AJAXin kautta ladataan tarvittavat käyttäjän tiedot.

Kun hakukone käy sivustollamme, se näkee tarvitsemansa staattisen sisällön. Ja kun käyttäjä käy sivustollamme, sivustomme alkaa käyttäytyä kuin SPA.

Ja mikä tärkeintä, NextJS tekee kaiken tämän automaattisesti! Meidän ei tarvitse huolehtia siitä - se tekee kaiken itse. Kaunista!

Seuraavissa tunneissa selvitämme, kuinka saada NextJS toimimaan kuvatulla tavalla.