Protams, es sākšu veidot rakstu.
GetServerSideProps ir populārās atvērtā pirmkoda JavaScript bibliotēkas Next.js līdzeklis. Šī funkcija ļauj iegūt datus servera pusē, nodrošinot burvju darbību, piemēram, lapu ģenerēšanu pēc katra pieprasījuma, kas galu galā palīdz uzlabot SEO un lietotāju pieredzi.
export async function getServerSideProps(context) {
const res = await fetch(`https://.../data`);
const data = await res.json();
if (!data) {
return {
notFound: true,
}
}
return {
props: { data },
}
}
Integrējot Next.js lietojumprogrammā, getServerSideProps aktivizē izsaukumu uz jūsu datu avotu, atveidojot lapu tikai pēc datu atgriešanas. Tas veicina ātrāku lapu ielādi un atsaucīgākas lietojumprogrammas uztveri.
GetServerSideProps funkcijas izpratne
Funkcija getServerSideProps ir servera puses renderēšanas (SSR) funkcija Next.js valodā, kas gaida, kamēr tiks ielādēti visi dati, pirms tā pabeidz renderēšanu. SSR uzlabo SEO veiktspēju, jo meklētājprogrammām tā piedāvā pilnībā renderētu lapu, kas ir ļoti svarīgi publiskām lapām, kur SEO pozicionēšana ir ļoti svarīga.
Iepriekš minētajā koda paraugā funkcija “getServerSideProps” ienes datus no servera. Pēc tam šie dati tiek nodoti kā atbalsts komponentam React un tiek iepriekš saglabāti serverī, kas ļauj lietotāja interfeisu viegli atjaunināt un renderēt.
GetServerSideProps priekšrocības un lietošana
Galvenā priekšrocība ir uzlabošana SEO. Tā vietā, lai saņemtu tukšu lapu, tīmekļa rāpuļprogrammas iegūst pilnībā renderētu lapu. Tas padara jūsu vietni indeksējamāku un uzlabo tās ranžēšanu meklētājprogrammu rezultātu lapās.
Tas arī uzlabo lietotāja pieredzi. Lēniem savienojumiem lietotāji parasti var redzēt tukšu vai ielādes ekrānu. Tomēr, izmantojot getServerSideProps, viņi uzreiz redz renderētu lapu.
export async function getServerSideProps(context) {
const { params, req, res, query } = context
// Perform server-side operations
return {
props: {},
}
}
Iepriekš minētajā piemērā parametrs “konteksts” ir objekts ar atslēgām, ko var izmantot servera puses darbībām.
- parametri: Satur maršruta parametrus lapām, kurās tiek izmantoti dinamiski maršruti.
- prasība: http.IncomingMessage gadījums, kā arī dažas iepriekš izveidotas starpprogrammatūras
- res: http.ServerResponse gadījums
- vaicājums: Objekts, kas attēlo vaicājuma virkni.
Tīmekļa lietojumprogrammu izveide, kas apvieno veiktspēju, SEO optimizāciju un izcilu lietotāja pieredzi, ir sarežģīts uzdevums, taču, izmantojot tādas funkcijas kā getServerSideProps no Next.js, šie mērķi kļūst vieglāk sasniedzami.
Bibliotēkas un iesaistītās funkcijas
Galvenā risinājumā iesaistītā funkcija ir getServerSideProps — Next.js specifiska funkcija. Šī funkcija ietver iebūvētu fetch() funkciju — modernu alternatīvu XMLHttpRequest. Fetch() izmantotais await operators tiek izmantots, lai gaidītu atgriezto solījumu (Promise), kas tiks atrisināts.
Atcerieties, ka izpratne par jūsu rīcībā esošajiem rīkiem, piemēram, Next.js un tā servera puses renderēšanas funkciju, ir ļoti svarīga, lai izveidotu lietojumprogrammas, kas ne tikai darbojas labi, bet arī labi darbojas no SEO viedokļa. Pateicoties JavaScript un SEO spēcīgajam savienojumam, nevar pārvērtēt tādu rīku kā Next.js un tādu funkciju kā getServerSideProps nozīmi.
