Bralci, kot ste vi, pomagajo podpirati MUO. Ko opravite nakup prek povezav na našem spletnem mestu, lahko zaslužimo partnersko provizijo.
Upodabljanje je postopek pretvorbe kode React v HTML. Način upodabljanja, ki ga izberete, je odvisen od podatkov, s katerimi delate, in od tega, koliko vam je pomembna učinkovitost.
V Next.js je upodabljanje zelo vsestransko. Strani lahko upodabljate na strani odjemalca ali strežnika, statično ali postopoma.
Oglejte si, kako te metode delujejo in kako deluje vsaka.
Upodabljanje na strani strežnika
Pri upodabljanju na strani strežnika (SSR), ko uporabnik obišče spletno stran, brskalnik strežniku pošlje zahtevo za to stran. Strežnik po potrebi pridobi potrebne podatke iz baze podatkov in jih skupaj z vsebino strani pošlje v brskalnik. Brskalnik ga nato prikaže uporabniku.
Brskalnik naredi to zahtevo za vsako povezavo, ki jo uporabnik klikne, kar pomeni, da strežnik vsakič obdela zahtevo.
To lahko zmanjša učinkovitost spletnega mesta. Vendar pa je upodabljanje na strani strežnika popolno za strani, ki porabljajo dinamične podatke.
Uporabite getServerSideProps za ponovno izgradnjo strani vsakič, ko uporabnik to zahteva.
izvozprivzetofunkcijodomov({ podatki }) {
vrnitev (
<glavni>
// Uporabapodatke
</main>
);
}izvozasinhfunkcijogetServerSideProps() {
// Pridobi podatke iz zunanjega API-ja
konst res = čakati fetch('https://.../data')
konst podatki = čakati res.json()
// Bo posredovano komponenti strani kot rekviziti
vrnitev { rekviziti: { podatki } }
}
getServerSideProps deluje samo na strežniku in tako deluje:
- Ko uporabnik neposredno dostopa do strani, se zažene ob času zahteve in stran je vnaprej upodobljena s rekviziti, ki jih vrne.
- Ko uporabnik dostopa do strani prek povezave Next, brskalnik pošlje zahtevo strežniku, ki jo izvaja.
V novi različici se lahko odločite za upodabljanje na strani strežnika z uporabo dinamičnih pridobivanj podatkov na strani ali postavitvi.
Dinamično pridobivanje podatkov je zahteva fetch(), ki izrecno onemogoči predpomnjenje z nastavitvijo možnosti predpomnilnika na »brez shranjevanja«.
prinesi ('https://...', { predpomnilnik: 'brez trgovine' });
Druga možnost je, da nastavite revalidate na 0:
prinesi ('https://...', { naslednji: { ponovno potrdi: 0 } });
Ta funkcija je trenutno v različici beta, zato imejte to v mislih. Več o dinamičnem pridobivanju podatkov lahko preberete v Next.js 13 beta dokumentov.
Upodabljanje na strani odjemalca
Uporabite upodabljanje na strani odjemalca (CSR), ko morate pogosto posodabljati podatke ali ko ne želite vnaprej upodabljati svoje strani. CSR lahko implementirate na ravni strani ali komponente. Na ravni strani Next.js pridobi podatke med izvajanjem in ko je končan na ravni komponente, pridobi podatke ob namestitvi. Zaradi tega lahko CSR prispeva k počasnemu delovanju.
Uporabi kavelj useEffect(). za upodabljanje strani na odjemalcu takole:
uvoz {useState, useEffect} od 'reagirati'
funkcijodomov() {
konst [podatki, setData] = useState(nič)
konst [isLoading, setLoading] = useState(lažno)useEffect(() => {
setLoading(prav)prinesi ('/api/get-data')
.then((res) => res.json())
.then((podatki) => {
setData (podatki)
setLoading(lažno)
})
}, [])if (isLoading) return <str>Nalaganje...</str>
if (!data) return <str>Ni podatkov</str>
vrnitev (
<div>
// Uporabapodatke
</div>
)
}
Uporabite lahko tudi SWR kavelj. Podatke shrani v predpomnilnik in jih znova preveri, če postanejo zastareli.
uvoz uporabiteSWR od 'swr'
const fetcher = (...args) => fetch(...args).then((res) => res.json())
funkcijodomov() {
konst { podatki, napaka } = useSWR('/api/podatki', prinašalec)
če (napaka) vrnitev <div>Nalaganje ni uspelo</div>
if (!data) return <div>Nalaganje...</div>
vrnitev (
<div>
// Uporabapodatke
</div>
)
}
V Next.js 13 morate uporabiti odjemalsko komponento tako, da na vrh datoteke dodate direktivo »use client«.
"uporabastranka";
izvozprivzeto () => {
vrnitev (
<div>
// Odjemalska komponenta
</div>
);
};
Razlika med SSR in CSR je v tem, da se podatki pridobijo ob vsaki zahtevi strani na strežniku v SSR, medtem ko se podatki pridobijo na strani odjemalca v CSR.
Generiranje statičnega spletnega mesta
Z ustvarjanjem statičnega spletnega mesta (SSG), stran pridobi podatke enkrat med gradnjo. Statično ustvarjene strani so zelo hitre in dobro delujejo, ker so vse strani izdelane vnaprej. SSG je zato popoln za strani, ki uporabljajo statično vsebino, kot so prodajne strani ali blogi.
V Next.js morate izvoziti funkcijo getStaticProps na strani, ki jo želite statično upodobiti.
izvozprivzetofunkcijodomov({ podatki }) {
vrnitev (
<glavni>
// Uporabapodatke
</main>
);
}izvozasinhfunkcijogetStaticProps() {
// Pridobi podatke iz zunanjega API-ja med gradnjo
konst res = čakati fetch('https://.../data')
konst podatki = čakati res.json()
// Bo posredovano komponenti strani kot rekviziti
vrnitev { rekviziti: { podatki } }
}
Prav tako lahko poizvedujete po bazi podatkov znotraj getStaticProps.
izvozasinhfunkcijogetStaticProps() {
// Pokličifunkcijodoprinašatipodatkeodzbirka podatkov
konst podatki = čakati getDataFromDB()
vrnitev { rekviziti: { podatki } }
}
V Next.js 13 je statično upodabljanje privzeto, vsebina pa je pridobljena in predpomnjena, razen če možnost predpomnjenja nastavite na izklopljeno.
asinhfunkcijogetData() {
konst res = čakati fetch('https://.../data');
vrnitev res.json();
}
izvozprivzetoasinhfunkcijodomov() {
konst podatki = čakati getData();
vrnitev (
<glavni>
// Uporabapodatke
</main>
);
}
Izvedite več o statično upodabljanje v Next.js 13 iz dokumentov.
Prirastno-statično ustvarjanje
Obstajajo trenutki, ko želite uporabljati SSG, vendar želite tudi redno posodabljati vsebino. Tukaj pomaga inkrementalna statična generacija (ISG).
ISG vam omogoča, da ustvarite ali posodobite statične strani, potem ko jih zgradite po časovnem intervalu, ki ga določite. Na ta način vam ni treba obnoviti celotnega mesta, samo strani, ki to potrebujejo.
ISG ohranja prednosti SSG z dodatno prednostjo zagotavljanja posodobljene vsebine uporabnikom. ISG je popoln za tiste strani na vašem spletnem mestu, ki porabljajo spreminjajoče se podatke. Na primer, lahko uporabite ISR za upodabljanje objav v spletnem dnevniku tako da ostane blog posodobljen, ko urejate objave ali dodajate nove.
Če želite uporabiti ISR, dodajte podlago za ponovno preverjanje v funkcijo getStaticProps na strani.
izvozasinhfunkcijogetStaticProps() {
konst res = čakati fetch('https://.../data')
konst podatki = čakati res.json()
vrnitev {
rekviziti: {
podatki,
},
ponovno potrdi: 60
}
}
Tu bo Next.js poskušal znova zgraditi stran, ko bo po 60 sekundah prispela zahteva. Naslednja zahteva bo povzročila odgovor s posodobljeno stranjo.
V Next.js 13 uporabite revalidate pri pridobivanju takole:
prinesi ('https://.../data', { naslednji: { ponovno potrdi: 60 } });
Časovni interval lahko nastavite tako, da najbolje deluje z vašimi podatki.
Kako izbrati način upodabljanja
Doslej ste spoznali štiri metode upodabljanja v Next.js – CSR, SSR, SSG in ISG. Vsaka od teh metod je primerna za različne situacije. CSR je koristen za strani, ki potrebujejo sveže podatke, kjer močan SEO ni zaskrbljujoč. SSR je odličen tudi za strani, ki porabljajo dinamične podatke, vendar je bolj prijazen do SEO.
SSG je primeren za strani, katerih podatki so večinoma statični, medtem ko je ISG najboljši za strani, ki vsebujejo podatke, ki jih želite posodobiti v intervalih. SSG in ISG sta odlična glede zmogljivosti in SEO, saj so podatki vnaprej pridobljeni in jih lahko predpomnite.
