Naravno, počet ću s pisanjem članka.
GetServerSideProps značajka je popularne JavaScript biblioteke otvorenog koda, Next.js. Ova značajka omogućuje dohvaćanje podataka na strani poslužitelja, pružajući magiju za izvođenje operacija poput generiranja stranice na svaki zahtjev što u konačnici pomaže u poboljšanju SEO-a i korisničkog iskustva.
export async function getServerSideProps(context) {
const res = await fetch(`https://.../data`);
const data = await res.json();
if (!data) {
return {
notFound: true,
}
}
return {
props: { data },
}
}
Kada se integrira u vašu aplikaciju Next.js, getServerSideProps pokreće poziv vašem izvoru podataka, renderirajući stranicu tek nakon što se podaci vrate. To doprinosi bržem učitavanju stranica i percepciji aplikacije koja bolje reagira.
Razumijevanje funkcije getServerSideProps
getServerSideProps funkcija je značajka iscrtavanja na strani poslužitelja (SSR) u Next.js, koja čeka da se dohvate svi podaci prije nego dovrši iscrtavanje. SSR poboljšava performanse SEO-a budući da tražilicama predstavlja potpuno prikazanu stranicu, što je ključna točka za javne stranice gdje je SEO pozicioniranje ključno.
U gornjem primjeru koda, funkcija 'getServerSideProps' dohvaća podatke s poslužitelja. Ovi se podaci zatim prosljeđuju kao podrška React komponenti i prethodno se pohranjuju na poslužitelju, što omogućuje korisničkom sučelju da se lako ažurira i renderira.
Prednosti i upotreba getServerSideProps
Glavna prednost je poboljšanje SEO. Umjesto prazne stranice, alati za indeksiranje weba dobivaju potpuno prikazanu stranicu. To čini vašu web stranicu boljom za indeksiranje i poboljšava njen rang na stranicama s rezultatima tražilice.
Također poboljšava korisničko iskustvo. Na sporim vezama korisnici obično mogu vidjeti prazan zaslon ili zaslon za učitavanje. Međutim, uz getServerSideProps, oni odmah vide prikazanu stranicu.
export async function getServerSideProps(context) {
const { params, req, res, query } = context
// Perform server-side operations
return {
props: {},
}
}
U gornjem primjeru, parametar 'kontekst' je objekt s ključevima koji se mogu koristiti za operacije na strani poslužitelja.
- parametri: Sadrži parametre rute za stranice koje koriste dinamičke rute.
- zahtjev: Instanca http.IncomingMessage, plus neki unaprijed izgrađeni međuprogrami
- govedina: Instanca http.ServerResponse
- upit: Objekt koji predstavlja niz upita.
Stvaranje web aplikacija koje spajaju izvedbu, SEO optimizaciju i izvrsno korisničko iskustvo složen je zadatak, ali sa značajkama kao što je getServerSideProps iz Next.js, ti ciljevi postaju dostižniji.
Knjižnice i uključene funkcije
Ključna funkcija uključena u rješenje je getServerSideProps, funkcija specifična za Next.js. Ova značajka uključuje ugrađeni dohvati() funkcija, moderna alternativa XMLHttpRequestu. Operator čekanja koji se koristi s fetch() koristi se za čekanje obećanja koje vraća za rješavanje.
Upamtite, razumijevanje alata koji su vam na raspolaganju, kao što je Next.js i njegova značajka iscrtavanja na strani poslužitelja, ključno je za stvaranje aplikacija koje ne samo da dobro rade, već i imaju dobre rezultate iz perspektive SEO-a. Uz jaku spregu JavaScripta i SEO-a, važnost alata kao što je Next.js i značajki kao što je getServerSideProps ne može se precijeniti.
