Čitatelji poput vas podržavaju MUO. Kada kupite putem poveznica na našoj stranici, možemo zaraditi partnersku proviziju.
Renderiranje je proces pretvaranja React koda u HTML. Metoda prikazivanja koju odaberete ovisi o podacima s kojima radite i koliko vam je stalo do izvedbe.
U Next.js, renderiranje je vrlo svestrano. Možete prikazati stranice na strani klijenta ili na strani poslužitelja, statički ili inkrementalno.
Pogledajte kako te metode funkcioniraju i kakva je svaka od njih.
Renderiranje na strani poslužitelja
Kod prikazivanja na strani poslužitelja (SSR), kada korisnik posjeti web stranicu, preglednik šalje zahtjev poslužitelju za tu stranicu. Poslužitelj dohvaća potrebne podatke iz baze podataka, ako je potrebno, i šalje ih zajedno sa sadržajem stranice pregledniku. Preglednik ga zatim prikazuje korisniku.
Preglednik postavlja ovaj zahtjev za svaku vezu koju korisnik klikne, što znači da poslužitelj obrađuje zahtjev svaki put.
To može smanjiti performanse web stranice. Međutim, prikazivanje na strani poslužitelja savršeno je za stranice koje koriste dinamičke podatke.
Upotrijebite getServerSideProps za ponovno sastavljanje stranice svaki put kada to korisnik zatraži.
izvozzadanofunkcijaDom({ podaci }) {
povratak (
<glavni>
// Koristitipodaci
</main>
);
}izvozasinkronifunkcijagetServerSideProps() {
// Dohvati podatke iz vanjskog API-ja
konst res = čekati dohvati('https://.../data')
konst podaci = čekati res.json()
// Bit će proslijeđeno komponenti stranice kao rekviziti
povratak { rekviziti: { podaci } }
}
getServerSideProps radi samo na poslužitelju i radi se ovako:
- Kada korisnik izravno pristupi stranici, ona se pokreće u vrijeme zahtjeva i stranica se unaprijed renderira s rekvizitima koje vraća.
- Kada korisnik pristupi stranici putem veze Next, preglednik šalje zahtjev poslužitelju koji ga pokreće.
U novoj verziji možete se odlučiti za iscrtavanje na strani poslužitelja pomoću dinamičkog dohvaćanja podataka na stranici ili izgledu.
Dinamičko dohvaćanje podataka su fetch() zahtjevi koji se posebno isključuju iz predmemoriranja postavljanjem opcije predmemorije na "bez pohrane".
dohvati ('https://...', { predmemorija: 'bez trgovine' });
Alternativno, postavite revalidate na 0:
dohvati ('https://...', { sljedeći: { ponovno potvrdi: 0 } });
Ova je značajka trenutno u beta fazi pa imajte to na umu. Više o dinamičkom dohvaćanju podataka možete pročitati u Next.js 13 beta dokumenata.
Renderiranje na strani klijenta
Trebali biste koristiti prikazivanje na strani klijenta (CSR) kada morate često ažurirati podatke ili kada ne želite unaprijed prikazati svoju stranicu. CSR možete implementirati na razini stranice ili komponente. Na razini stranice, Next.js dohvaća podatke tijekom izvođenja, a kada se završi na razini komponente, dohvaća podatke pri postavljanju. Zbog toga CSR može pridonijeti sporom radu.
Koristiti useEffect() kuka za prikaz stranica na klijentu ovako:
uvoz {useState, useEffect} iz 'reagirati'
funkcijaDom() {
konst [podaci, setData] = useState(ništavan)
konst [isLoading, setLoading] = useState(lažno)useEffect(() => {
setLoading(pravi)dohvati ('/api/get-data')
.then((res) => res.json())
.then((podaci) => {
setData (podaci)
setLoading(lažno)
})
}, [])if (isLoading) povratak <str>Učitavam...</str>
if (!data) return <str>Nema podataka</str>
povratak (
<div>
// Koristitipodaci
</div>
)
}
Također možete koristiti SWR kuku. Predmemorira podatke i ponovno ih provjerava u slučaju da zastare.
uvoz koristiti SWR iz 'swr'
const fetcher = (...args) => dohvati(...args).then((res) => res.json())
funkcijaDom() {
konst { podaci, pogreška } = useSWR('/api/podaci', dohvaćač)
if (greška) return <div>Učitavanje nije uspjelo</div>
if (!data) return <div>Učitavam...</div>
povratak (
<div>
// Koristitipodaci
</div>
)
}
U Next.js 13 trebate koristiti komponentu klijenta dodavanjem direktive "use client" na vrh datoteke.
"koristitiklijent";
izvozzadano () => {
povratak (
<div>
// Komponenta klijenta
</div>
);
};
Razlika između SSR-a i CSR-a je u tome što se podaci dohvaćaju na svakom zahtjevu stranice na poslužitelju u SSR-u, dok se podaci dohvaćaju na strani klijenta u CSR-u.
Generiranje statičkih stranica
S generiranjem statičkih stranica (SSG), stranica dohvaća podatke jednom tijekom vremena izgradnje. Statički generirane stranice vrlo su brze i dobro rade jer su sve stranice napravljene unaprijed. SSG je stoga savršen za stranice koje koriste statični sadržaj kao što su prodajne stranice ili blogovi.
U Next.js morate izvesti funkciju getStaticProps na stranici koju želite statički prikazati.
izvozzadanofunkcijaDom({ podaci }) {
povratak (
<glavni>
// Koristitipodaci
</main>
);
}izvozasinkronifunkcijagetStaticProps() {
// Dohvaćanje podataka iz vanjskog API-ja tijekom izgradnje
konst res = čekati dohvati('https://.../data')
konst podaci = čekati res.json()
// Bit će proslijeđeno komponenti stranice kao rekviziti
povratak { rekviziti: { podaci } }
}
Također možete postaviti upit bazi podataka unutar getStaticProps.
izvozasinkronifunkcijagetStaticProps() {
// Pozivfunkcijadodohvatitipodaciizbaza podataka
konst podaci = čekati getDataFromDB()
povratak { rekviziti: { podaci } }
}
U Next.js 13, statičko iscrtavanje je zadano, a sadržaj se dohvaća i sprema u predmemoriju osim ako opciju predmemoriranja ne postavite na isključeno.
asinkronifunkcijagetData() {
konst res = čekati dohvati('https://.../data');
povratak res.json();
}
izvozzadanoasinkronifunkcijaDom() {
konst podaci = čekati getData();
povratak (
<glavni>
// Koristitipodaci
</main>
);
}
Nauči više o statičko prikazivanje u Next.js 13 iz dokumenata.
Inkrementalno-statičko generiranje
Postoje trenuci kada želite koristiti SSG, ali želite i redovito ažurirati sadržaj. Tu pomaže inkrementalna statička generacija (ISG).
ISG vam omogućuje stvaranje ili ažuriranje statičkih stranica nakon što ih izgradite nakon vremenskog intervala koji odredite. Na ovaj način ne morate ponovno graditi cijelo web mjesto samo one stranice koje to trebaju.
ISG zadržava prednosti SSG-a uz dodatnu pogodnost posluživanja ažuriranog sadržaja korisnicima. ISG je savršen za one stranice na vašem web-mjestu koje troše podatke koji se mijenjaju. Na primjer, možete koristite ISR za prikaz postova na blogu tako da blog ostane ažuriran kada uređujete postove ili dodajete nove.
Da biste koristili ISR, dodajte revalidate prop funkciji getStaticProps na stranici.
izvozasinkronifunkcijagetStaticProps() {
konst res = čekati dohvati('https://.../data')
konst podaci = čekati res.json()
povratak {
rekviziti: {
podaci,
},
revalificirati: 60
}
}
Ovdje će Next.js pokušati ponovno izgraditi stranicu kada zahtjev stigne nakon 60 sekundi. Sljedeći zahtjev rezultirat će odgovorom s ažuriranom stranicom.
U Next.js 13 koristite revalidate u dohvaćanju ovako:
dohvati ('https://.../data', { sljedeći: { ponovno potvrdi: 60 } });
Možete postaviti vremenski interval na ono što najbolje funkcionira s vašim podacima.
Kako odabrati metodu iscrtavanja
Do sada ste naučili o četiri metode prikazivanja u Next.js — CSR, SSR, SSG i ISG. Svaka od ovih metoda prikladna je za različite situacije. CSR je koristan za stranice koje trebaju svježe podatke, gdje snažan SEO nije problem. SSR je također izvrstan za stranice koje troše dinamičke podatke, ali više je prilagođen SEO-u.
SSG je prikladan za stranice čiji su podaci uglavnom statični, dok je ISG najbolji za stranice koje sadrže podatke koje želite ažurirati u intervalima. SSG i ISG izvrsni su u smislu performansi i SEO-a jer se podaci unaprijed dohvaćaju i možete ih spremiti u predmemoriju.
