Teiesugused lugejad aitavad MUO-d toetada. Kui teete ostu meie saidil olevate linkide abil, võime teenida sidusettevõtte komisjonitasu.
Renderdamine on Reacti koodi teisendamine HTML-iks. Teie valitud renderdusmeetod sõltub andmetest, millega töötate, ja sellest, kui palju te toimivusest hoolite.
Programmis Next.js on renderdamine väga mitmekülgne. Saate lehti renderdada kliendi- või serveripoolselt, staatiliselt või järk-järgult.
Vaadake, kuidas need meetodid töötavad ja kuidas igaüks neist toimib.
Serveripoolne renderdamine
Serveripoolse renderdamise (SSR) korral saadab brauser veebilehe külastamisel serverile selle lehe päringu. Server hangib vajadusel andmebaasist vajalikud andmed ja saadab need koos lehe sisuga brauserisse. Seejärel kuvab brauser selle kasutajale.
Brauser esitab selle päringu iga lingi kohta, millel kasutaja klõpsab, mis tähendab, et server töötleb päringut iga kord.
See võib vähendada veebisaidi jõudlust. Serveripoolne renderdamine sobib aga suurepäraselt lehtede jaoks, mis tarbivad dünaamilisi andmeid.
Kasutage getServerSidePropsi, et leht uuesti üles ehitada iga kord, kui kasutaja seda nõuab.
eksportidavaikimisifunktsiooniKodu({ andmed }) {
tagasi (
<peamine>
// Kasutageandmeid
</main>
);
}eksportidaasünkrfunktsioonigetServerSideProps() {
// Andmete toomine välisest API-st
konst res = ootama fetch('https://.../data')
konst andmed = ootama res.json()
// Edastatakse rekvisiidina lehekomponendile
tagasi { rekvisiidid: { andmed } }
}
getServerSideProps töötab ainult serveris ja see töötab järgmiselt:
- Kui kasutaja siseneb lehele otse, käivitub see päringu ajal ja leht eelrenderdatakse koos tagastatavate rekvisiitidega.
- Kui kasutaja siseneb lehele lingi Järgmine kaudu, saadab brauser päringu seda käitavale serverile.
Uues versioonis saate lubada serveripoolse renderduse, kasutades lehel või paigutuses dünaamilisi andmete toomisi.
Dünaamilised andmete toomised on hankimispäringud, mis konkreetselt loobuvad vahemällu salvestamisest, määrates vahemälu suvandi olekusse „no-store”.
tõmba('https://...', { vahemälu: 'kaupluseta' });
Teise võimalusena määrake uuesti kinnitamine väärtusele 0:
tõmba('https://...', { next: { revalidate: 0 } });
See funktsioon on praegu beetaversioonis, nii et pidage seda meeles. Dünaamiliste andmete toomise kohta saate lisateavet jaotisest Next.js 13 beetadokumendid.
Kliendipoolne renderdamine
Kui teil on vaja andmeid sageli värskendada või kui te ei soovi oma lehte eelrenderdada, peaksite kasutama kliendipoolset renderdamist (CSR). CSR-i saate rakendada lehe või komponendi tasemel. Lehetasandil hangib Next.js andmeid käitamise ajal ja kui seda tehakse komponendi tasemel, siis ühendamisel. Seetõttu võib CSR aidata kaasa aeglasele toimimisele.
Kasuta useEffect() konks lehtede renderdamiseks kliendil järgmiselt:
importida { useState, useEffect } alates 'reageeri'
funktsiooniKodu() {
konst [data, setData] = useState(null)
konst [isLoading, setLoading] = useState(vale)useEffect(() => {
setLoading(tõsi)tõmba('/api/get-data')
.then((res) => res.json())
.then((andmed) => {
setData (andmed)
setLoading(vale)
})
}, [])kui (isLoading) tagastab <lk>Laadimine...</lk>
kui (!andmed) tagastab <lk>Andmed puuduvad</lk>
tagasi (
<div>
// Kasutageandmeid
</div>
)
}
Võite kasutada ka SWR-konksu. See salvestab andmed vahemällu ja kinnitab need uuesti juhuks, kui need aeguvad.
importida kasutage SWR-i alates 'swr'
const fetcher = (...args) => too(...args).then((res) => res.json())
funktsiooniKodu() {
konst { andmed, viga } = useSWR('/api/andmed', tooja)
kui (viga) tagastab <div>Laadimine ebaõnnestus</div>
kui (!andmed) tagastab <div>Laadimine...</div>
tagasi (
<div>
// Kasutageandmeid
</div>
)
}
Versioonis Next.js 13 peate kasutama kliendikomponenti, lisades faili ülaossa käskluse "kasuta klienti".
"kasutadaklient";
eksportidavaikimisi () => {
tagasi (
<div>
// Kliendi komponent
</div>
);
};
Erinevus SSR-i ja CSR-i vahel seisneb selles, et andmed tuuakse SSR-i serveris iga lehepäringu korral, samas kui andmed tuuakse CSR-is kliendi poolelt.
Staatilise saidi genereerimine
Staatilise saidi genereerimisega (SSG), leht hangib andmeid üks kord ehituse ajal. Staatiliselt loodud lehed on väga kiired ja toimivad hästi, kuna kõik lehed on eelnevalt üles ehitatud. SSG sobib seega suurepäraselt lehtedele, mis kasutavad staatilist sisu, nagu müügilehed või ajaveebid.
Programmis Next.js peate eksportima funktsiooni getStaticProps lehele, mida soovite staatiliselt renderdada.
eksportidavaikimisifunktsiooniKodu({ andmed }) {
tagasi (
<peamine>
// Kasutageandmeid
</main>
);
}eksportidaasünkrfunktsioonigetStaticProps() {
// Andmete toomine välisest API-st koostamise ajal
konst res = ootama fetch('https://.../data')
konst andmed = ootama res.json()
// Edastatakse rekvisiidina lehekomponendile
tagasi { rekvisiidid: { andmed } }
}
Samuti saate andmebaasist päringuid teha getStaticPropsis.
eksportidaasünkrfunktsioonigetStaticProps() {
// Helistamafunktsioonijuurdetoomaandmeidalatesandmebaasi
konst andmed = ootama getDataFromDB()
tagasi { rekvisiidid: { andmed } }
}
Rakenduses Next.js 13 on vaikeseadeks staatiline renderdus ning sisu tuuakse ja salvestatakse vahemällu, välja arvatud juhul, kui lülitate vahemällu salvestamise suvandi välja.
asünkrfunktsioonigetData() {
konst res = ootama fetch('https://.../data');
tagasi res.json();
}
eksportidavaikimisiasünkrfunktsiooniKodu() {
konst andmed = ootama getData();
tagasi (
<peamine>
// Kasutageandmeid
</main>
);
}
Lisateavet staatiline renderdamine rakenduses Next.js 13 dokumentidest.
Inkrementaalstaatiline genereerimine
Mõnikord soovite kasutada SSG-d, kuid soovite ka sisu regulaarselt värskendada. Siin aitab inkrementaalne staatiline genereerimine (ISG).
ISG võimaldab teil luua või värskendada staatilisi lehti pärast seda, kui olete need pärast määratud ajavahemikku koostanud. Nii ei pea te kogu saiti uuesti üles ehitama ainult neid lehti, mis seda vajavad.
ISG säilitab SSG eelised, millele lisandub kasutajatele ajakohase sisu pakkumine. ISG sobib suurepäraselt nende saidi lehtede jaoks, mis tarbivad muutuvaid andmeid. Näiteks saate kasutage ajaveebi postituste renderdamiseks ISR-i nii, et ajaveebi oleks värskendatud, kui muudate postitusi või lisate uusi.
ISR-i kasutamiseks lisage lehe funktsioonile getStaticProps revalidate prop.
eksportidaasünkrfunktsioonigetStaticProps() {
konst res = ootama fetch('https://.../data')
konst andmed = ootama res.json()
tagasi {
rekvisiidid: {
andmed,
},
kehtivuse pikendamine: 60
}
}
Siin proovib Next.js lehte uuesti üles ehitada, kui päring saabub 60 sekundi pärast. Järgmise päringu tulemuseks on vastus koos uuendatud lehega.
Rakenduses Next.js 13 kasutage toomisel revalidate järgmiselt:
tõmba('https://.../data', { next: { revalidate: 60 } });
Saate määrata ajavahemikuks selle, mis teie andmetega kõige paremini töötab.
Kuidas valida renderdusmeetodit
Siiani olete õppinud Next.js-i nelja renderdusmeetodi kohta – CSR, SSR, SSG ja ISG. Kõik need meetodid sobivad erinevates olukordades. CSR on kasulik värskeid andmeid vajavatele lehtedele, kus tugev SEO ei valmista muret. SSR sobib suurepäraselt ka lehtede jaoks, mis tarbivad dünaamilisi andmeid, kuid see on SEO-sõbralikum.
SSG sobib lehtedele, mille andmed on enamasti staatilised, samas kui ISG sobib kõige paremini lehtedele, mis sisaldavad andmeid, mida soovite ajavahemike järel värskendada. SSG ja ISG on jõudluse ja SEO osas suurepärased, kuna andmed on eellaaditud ja saate neid vahemällu salvestada.
