Lesere som deg er med på å støtte MUO. Når du foretar et kjøp ved å bruke lenker på nettstedet vårt, kan vi tjene en tilknyttet provisjon.
Gjengivelse er prosessen med å konvertere React-kode til HTML. Gjengivelsesmetoden du velger avhenger av dataene du jobber med og hvor mye du bryr deg om ytelse.
I Next.js er gjengivelse veldig allsidig. Du kan gjengi sider på klientsiden eller serversiden, statisk eller inkrementelt.
Ta en titt på hvordan disse metodene fungerer og hvordan de fungerer.
Gjengivelse på serversiden
Med server-side rendering (SSR), når en bruker besøker en nettside, sender nettleseren en forespørsel til serveren for den siden. Serveren henter nødvendig data fra databasen, om nødvendig, og sender den sammen med sidens innhold til nettleseren. Nettleseren viser det deretter til brukeren.
Nettleseren gjør denne forespørselen for hver lenke som brukeren klikker, noe som betyr at serveren behandler forespørselen hver gang.
Dette kan redusere nettstedets ytelse. Gjengivelse på serversiden er imidlertid perfekt for sider som bruker dynamiske data.
Bruk getServerSideProps til å gjenoppbygge siden hver gang en bruker ber om det.
eksportmisligholdefunksjonHjem({ data }) {
komme tilbake (
<hoved->
// Brukdata
</main>
);
}eksportasynkronfunksjongetServerSideProps() {
// Hent data fra eksternt API
konst res = avvente hente('https://.../data')
konst data = avvente res.json()
// Sendes til sidekomponenten som rekvisitter
komme tilbake { Rekvisitter: { data } }
}
getServerSideProps kjører bare på serveren, og dette er hvordan det kjører:
- Når en bruker går direkte til siden, kjører den på forespørselstidspunktet, og siden er forhåndsgjengitt med rekvisittene den returnerer.
- Når en bruker går inn på siden via en Neste-kobling, sender nettleseren en forespørsel til serveren som kjører den.
I den nye versjonen kan du velge gjengivelse på serversiden ved å bruke dynamiske datahentinger på en side eller et oppsett.
Dynamiske datahentinger er henting()-forespørsler som spesifikt velger bort bufring ved å sette hurtigbufferalternativet til "ingen butikk".
hente('https://...', { cache: 'ingen butikk' });
Alternativt, sett revalidate til 0:
hente('https://...', { neste: { revalidate: 0 } });
Denne funksjonen er for øyeblikket i beta, så husk det. Du kan lese mer om dynamiske datahentinger i Next.js 13 beta-dokumenter.
Gjengivelse på klientsiden
Du bør bruke klientsidegjengivelse (CSR) når du trenger å oppdatere data ofte eller når du ikke vil forhåndsrendere siden din. Du kan implementere CSR på sidenivå eller komponentnivå. På sidenivå henter Next.js data ved kjøretid, og når det er gjort på komponentnivå, henter det data ved montering. På grunn av dette kan CSR bidra til treg ytelse.
Bruke useEffect() krok for å gjengi sider på klienten slik:
import { useState, useEffect } fra 'reagere'
funksjonHjem() {
konst [data, setData] = useState(null)
konst [isLoading, setLoading] = useState(falsk)useEffect(() => {
setLoading(ekte)hente('/api/get-data')
.then((res) => res.json())
.then((data) => {
setData (data)
setLoading(falsk)
})
}, [])if (isLoading) returner <s>Laster inn...</s>
hvis (!data) returnerer <s>Ingen data</s>
komme tilbake (
<div>
// Brukdata
</div>
)
}
Du kan også bruke SWR-kroken. Den cacher dataene og revaliderer dem i tilfelle de blir foreldet.
import bruk SWR fra 'swr'
const henter = (...args) => hente(...args).then((res) => res.json())
funksjonHjem() {
konst { data, error } = useSWR('/api/data', henter)
hvis (feil) returnere <div>Kunne ikke laste</div>
hvis (!data) returnerer <div>Laster inn...</div>
komme tilbake (
<div>
// Brukdata
</div>
)
}
I Next.js 13 må du bruke en klientkomponent ved å legge til "bruk klient"-direktivet øverst i filen.
"brukklient";
eksportmisligholde () => {
komme tilbake (
<div>
// Klientkomponent
</div>
);
};
Forskjellen mellom SSR og CSR er at dataene hentes på hver sideforespørsel på serveren i SSR mens dataene hentes på klientsiden i CSR.
Generering av statisk nettsted
Med generering av statisk sted (SSG), siden henter data en gang i løpet av byggetiden. Statisk genererte sider er veldig raske og gir gode resultater fordi alle sidene er bygget på forhånd. SSG er derfor perfekt for sider som bruker statisk innhold som salgssider eller blogger.
I Next.js må du eksportere getStaticProps-funksjonen på siden du vil gjengi statisk.
eksportmisligholdefunksjonHjem({ data }) {
komme tilbake (
<hoved->
// Brukdata
</main>
);
}eksportasynkronfunksjongetStaticProps() {
// Hent data fra ekstern API ved byggetidspunkt
konst res = avvente hente('https://.../data')
konst data = avvente res.json()
// Sendes til sidekomponenten som rekvisitter
komme tilbake { Rekvisitter: { data } }
}
Du kan også spørre databasen i getStaticProps.
eksportasynkronfunksjongetStaticProps() {
// Anropfunksjontilhentedatafradatabase
konst data = avvente getDataFromDB()
komme tilbake { Rekvisitter: { data } }
}
I Next.js 13 er statisk gjengivelse standard, og innhold hentes og bufres med mindre du setter bufringsalternativet til av.
asynkronfunksjongetData() {
konst res = avvente hente('https://.../data');
komme tilbake res.json();
}
eksportmisligholdeasynkronfunksjonHjem() {
konst data = avvente getData();
komme tilbake (
<hoved->
// Brukdata
</main>
);
}
Lære mer om statisk gjengivelse i Next.js 13 fra dokumentene.
Inkrementell-statisk generasjon
Det er tider når du ønsker å bruke SSG, men også ønsker å oppdatere innholdet regelmessig. Det er her inkrementell statisk generering (ISG) hjelper.
ISG lar deg opprette eller oppdatere statiske sider etter at du har bygget dem etter tidsintervallet du angir. På denne måten trenger du ikke å gjenoppbygge hele nettstedet bare sidene som trenger det.
ISG beholder fordelene med SSG med den ekstra fordelen av å levere oppdatert innhold til brukerne. ISG er perfekt for de sidene på nettstedet ditt som bruker skiftende data. For eksempel kan du bruke ISR til å gjengi blogginnlegg slik at bloggen holder seg oppdatert når du redigerer innlegg eller legger til nye.
For å bruke ISR, legg til revalidate prop i getStaticProps-funksjonen på en side.
eksportasynkronfunksjongetStaticProps() {
konst res = avvente hente('https://.../data')
konst data = avvente res.json()
komme tilbake {
Rekvisitter: {
data,
},
revalidere: 60
}
}
Her vil Next.js prøve å gjenoppbygge siden når en forespørsel kommer inn etter 60 sekunder. Den neste forespørselen vil resultere i et svar med den oppdaterte siden.
I Next.js 13 bruker du revalidate i henting slik:
hente('https://.../data', { neste: { revalidate: 60 } });
Du kan stille inn tidsintervallet til det som fungerer best med dataene dine.
Hvordan velge en gjengivelsesmetode
Så langt har du lært om de fire gjengivelsesmetodene i Next.js — CSR, SSR, SSG og ISG. Hver av disse metodene passer for forskjellige situasjoner. CSR er nyttig for sider som trenger ferske data, der sterk SEO ikke er et problem. SSR er også flott for sider som bruker dynamiske data, men det er mer SEO-vennlig.
SSG er egnet for sider med data som stort sett er statiske, mens ISG er best for sider som inneholder data du ønsker å oppdatere i intervaller. SSG og ISG er gode når det gjelder ytelse og SEO siden data er forhåndshentet og du kan cache dem.