Naravno, počeću da pravim članak.
GetServerSideProps je karakteristika popularne JavaScript biblioteke otvorenog koda, Next.js. Ova funkcija omogućava dohvaćanje podataka na strani servera, pružajući magiju za izvođenje operacija kao što je generiranje stranice na svaki zahtjev što na kraju 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 je integrisan u vašu Next.js aplikaciju, getServerSideProps pokreće poziv vašem izvoru podataka, renderujući stranicu samo kada se podaci vrate. Ovo doprinosi bržem učitavanju stranica i percepciji aplikacije koja bolje reagira.
Razumijevanje funkcije getServerSideProps
GetServerSideProps funkcija je funkcija renderiranja na strani servera (SSR) u Next.js-u, koja čeka da se dohvate svi podaci prije nego što završi renderiranje. SSR poboljšava performanse SEO-a jer pretraživačima predstavlja potpuno prikazanu stranicu, ključnu tačku za javne stranice na kojima je SEO pozicioniranje ključno.
U primjeru koda iznad, funkcija 'getServerSideProps' dohvaća podatke sa servera. Ovi podaci se zatim prosljeđuju kao prop React komponenti i predkeširaju na serveru, što omogućava korisničkom sučelju da se lako ažurira i renderira.
Prednosti i upotreba getServerSideProps
Glavna prednost je poboljšanje SEO. Umjesto da primaju praznu stranicu, web indekseri dobijaju potpuno prikazanu stranicu. Ovo čini vašu web stranicu lakše indeksiranom 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 ekran ili ekran za učitavanje. Međutim, sa 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 može koristiti za operacije na strani servera.
- parametri: Sadrži parametre rute za stranice koje koriste dinamičke rute.
- zahtjev: Instanca http.IncomingMessage, plus neki unaprijed izgrađeni međuoprema
- govedina: Instanca http.ServerResponse
- upit: Objekt koji predstavlja string upita.
Kreiranje web aplikacija koje kombinuju performanse, SEO optimizaciju i odlično korisničko iskustvo je složen zadatak, ali sa funkcijama kao što je getServerSideProps iz Next.js, ovi ciljevi postaju mnogo ostvariviji.
Biblioteke i uključene funkcije
Ključna funkcija uključena u rješenje je getServerSideProps, funkcija specifična za Next.js. Ova funkcija uključuje ugrađeni dohvati() funkcija, moderna alternativa XMLHttpRequest. Operator await koji se koristi sa fetch() koristi se za čekanje da se obećanje koje se vrati da se riješi.
Zapamtite, razumijevanje alata koji su vam na raspolaganju, poput Next.js-a i njegove funkcije renderiranja na strani servera, ključno je za kreiranje aplikacija koje ne samo da rade dobro, već i rade dobro iz SEO perspektive. Uz jaku spregu JavaScript-a i SEO-a, važnost alata kao što je Next.js i funkcija poput getServerSideProps ne može se precijeniti.
