Muidugi, ma hakkan artiklit koostama.
GetServerSideProps on populaarse avatud lähtekoodiga JavaScripti teegi Next.js funktsioon. See funktsioon võimaldab serveripoolset andmete toomist, pakkudes maagiat selliste toimingute tegemiseks nagu lehe genereerimine iga päringu korral, mis aitab lõppkokkuvõttes parandada SEO-d ja kasutajakogemust.
export async function getServerSideProps(context) {
const res = await fetch(`https://.../data`);
const data = await res.json();
if (!data) {
return {
notFound: true,
}
}
return {
props: { data },
}
}
Rakendusse Next.js integreerituna käivitab getServerSideProps kõne teie andmeallikale, renderdades lehe alles pärast andmete tagastamist. See aitab kaasa lehtede kiiremale laadimisele ja tundlikuma rakenduse tajumisele.
Funktsiooni getServerSideProps mõistmine
GetServerSideProps Funktsioon on Next.js'i serveripoolse renderduse (SSR) funktsioon, mis ootab enne renderdamise lõpetamist, kuni kõik andmed tuuakse. SSR parandab SEO jõudlust, kuna see esitab otsingumootoritele täielikult renderdatud lehe, mis on ülioluline punkt avalike lehtede jaoks, kus SEO positsioneerimine on ülioluline.
Ülaltoodud näidiskoodis hangib funktsioon „getServerSideProps” andmed serverist. Need andmed edastatakse seejärel Reacti komponendi rekvisiidina ja salvestatakse serverisse, mis võimaldab kasutajaliidest hõlpsasti värskendada ja renderdada.
GetServerSidePropsi eelised ja kasutamine
Peamine eelis on parandamine SEO. Tühja lehe asemel saavad veebiindeksoijad täielikult renderdatud lehe. See muudab teie veebisaidi indekseeritavamaks ja parandab selle asetust otsingumootori tulemuste lehtedel.
See parandab ka kasutajakogemust. Aeglaste ühenduste korral võivad kasutajad tavaliselt näha tühja või laadimiskuva. GetServerSidePropsiga näevad nad aga kohe renderdatud lehte.
export async function getServerSideProps(context) {
const { params, req, res, query } = context
// Perform server-side operations
return {
props: {},
}
}
Ülaltoodud näites on parameeter "kontekst" võtmetega objekt, mida saab kasutada serveripoolsete toimingute jaoks.
- parameetrid: Sisaldab dünaamilisi marsruute kasutavate lehtede marsruudi parameetreid.
- req: Teenuse http.IncomingMessage eksemplar ja mõni eelehitatud vahevara
- veiseliha: http.ServerResponse'i eksemplar
- päring: Päringu stringi esindav objekt.
Jõudlust, SEO optimeerimist ja suurepärast kasutajakogemust ühendavate veebirakenduste loomine on keeruline ülesanne, kuid funktsioonidega, nagu Next.js'i getServerSideProps, on need eesmärgid paremini saavutatavad.
Raamatukogud ja kaasatud funktsioonid
Lahenduse põhifunktsioon on getServerSideProps, Next.js-i spetsiifiline funktsioon. See funktsioon sisaldab sisseehitatud tõmba() funktsioon, kaasaegne alternatiiv XMLHttpRequestile. Funktsioonis fetch() kasutatud ooteoperaatorit kasutatakse lubaduse ootamiseks, mille lahendamiseks see naaseb.
Pidage meeles, et teie käsutuses olevate tööriistade, nagu Next.js ja selle serveripoolse renderdusfunktsiooni mõistmine on ülioluline rakenduste loomisel, mis mitte ainult ei tööta hästi, vaid toimivad hästi ka SEO vaatenurgast. JavaScripti ja SEO tugeva seose tõttu ei saa selliste tööriistade nagu Next.js ja funktsioonide, nagu getServerSideProps, tähtsust ülehinnata.
