Læsere som dig hjælper med at støtte MUO. Når du foretager et køb ved hjælp af links på vores websted, kan vi optjene en affiliate-kommission.
Gengivelse er processen med at konvertere React-kode til HTML. Den gengivelsesmetode, du vælger, afhænger af de data, du arbejder med, og hvor meget du bekymrer dig om ydeevne.
I Next.js er gengivelse meget alsidig. Du kan gengive sider på klientsiden eller serversiden, statisk eller trinvist.
Tag et kig på, hvordan disse metoder fungerer, og hvordan de hver især fungerer.
Rendering på serversiden
Med server-side rendering (SSR), når en bruger besøger en webside, sender browseren en anmodning til serveren om den pågældende side. Serveren henter de nødvendige data fra databasen, hvis det er nødvendigt, og sender det sammen med sidens indhold til browseren. Browseren viser det derefter til brugeren.
Browseren laver denne anmodning for hvert link, som brugeren klikker på, hvilket betyder, at serveren behandler anmodningen hver gang.
Dette kan reducere hjemmesidens ydeevne. Men gengivelse på serversiden er perfekt til sider, der bruger dynamiske data.
Brug getServerSideProps til at genopbygge siden, hver gang en bruger anmoder om det.
eksportStandardfungereHjem({ data }) {
Vend tilbage (
<vigtigste>
// Brugdata
</main>
);
}eksportasynkronfungeregetServerSideProps() {
// Hent data fra eksternt api
konst res = vente hente('https://.../data')
konst data = vente res.json()
// Sendes til sidekomponenten som rekvisitter
Vend tilbage { rekvisitter: { data } }
}
getServerSideProps kører kun på serveren, og sådan kører det:
- Når en bruger går direkte ind på siden, kører den på anmodningstidspunktet, og siden er præ-gengivet med de rekvisitter, den returnerer.
- Når en bruger får adgang til siden via et Næste-link, sender browseren en anmodning til den server, der kører den.
I den nye version kan du tilvælge gengivelse på serversiden ved hjælp af dynamiske datahentninger på en side eller et layout.
Dynamiske datahentninger er fetch()-anmodninger, der specifikt fravælger caching ved at indstille cacheindstillingen til "no-store".
hente('https://...', { cache: 'ingen butik' });
Alternativt kan du indstille genvalidering til 0:
hente('https://...', { næste: { revalidate: 0 } });
Denne funktion er i øjeblikket i beta, så husk det. Du kan læse mere om dynamiske datahentninger i Next.js 13 beta-dokumenter.
Rendering på klientsiden
Du bør bruge klientsidegengivelse (CSR), når du har brug for at opdatere data ofte, eller når du ikke ønsker at præ-rendere din side. Du kan implementere CSR på sideniveau eller komponentniveau. På sideniveau henter Next.js data under kørsel, og når det er færdigt på komponentniveau, henter det data ved mount. På grund af dette kan CSR bidrage til langsom præstation.
Brug useEffect() hook for at gengive sider på klienten sådan her:
importere { useState, useEffect } fra 'reagere'
fungereHjem() {
konst [data, setData] = useState(nul)
konst [isLoading, setLoading] = useState(falsk)useEffect(() => {
sætLoading(rigtigt)hente('/api/get-data')
.then((res) => res.json())
.then((data) => {
setData (data)
sætLoading(falsk)
})
}, [])hvis (isLoading) returnerer <s>Indlæser...</s>
hvis (!data) vender tilbage <s>Ingen data</s>
Vend tilbage (
<div>
// Brugdata
</div>
)
}
Du kan også bruge SWR krogen. Det cacher dataene og genvaliderer dem, hvis de bliver forældede.
importere brug SWR fra 'swr'
const henter = (...args) => fetch(...args).then((res) => res.json())
fungereHjem() {
konst { data, fejl } = brugSWR('/api/data', henter)
hvis (fejl) returnere <div>Kunne ikke indlæses</div>
hvis (!data) vender tilbage <div>Indlæser...</div>
Vend tilbage (
<div>
// Brugdata
</div>
)
}
I Next.js 13 skal du bruge en klientkomponent ved at tilføje "brug klient"-direktivet øverst i filen.
"brugklient";
eksportStandard () => {
Vend tilbage (
<div>
// Klientkomponent
</div>
);
};
Forskellen mellem SSR og CSR er, at dataene hentes på hver sideanmodning på serveren i SSR, mens dataene hentes på klientsiden i CSR.
Generering af statisk websted
Med static-site generation (SSG), siden henter data én gang i byggetiden. Statisk genererede sider er meget hurtige og fungerer godt, fordi alle sider er bygget på forhånd. SSG er derfor perfekt til sider, der bruger statisk indhold som salgssider eller blogs.
I Next.js skal du eksportere funktionen getStaticProps på den side, du vil statisk gengive.
eksportStandardfungereHjem({ data }) {
Vend tilbage (
<vigtigste>
// Brugdata
</main>
);
}eksportasynkronfungeregetStaticProps() {
// Hent data fra ekstern API på byggetidspunktet
konst res = vente hente('https://.../data')
konst data = vente res.json()
// Sendes til sidekomponenten som rekvisitter
Vend tilbage { rekvisitter: { data } }
}
Du kan også forespørge databasen inde i getStaticProps.
eksportasynkronfungeregetStaticProps() {
// Opkaldfungeretilhentedatafradatabase
konst data = vente getDataFromDB()
Vend tilbage { rekvisitter: { data } }
}
I Next.js 13 er statisk gengivelse standard, og indhold hentes og cachelagres, medmindre du slår cacheindstillingen fra.
asynkronfungeregetData() {
konst res = vente hente('https://.../data');
Vend tilbage res.json();
}
eksportStandardasynkronfungereHjem() {
konst data = vente getData();
Vend tilbage (
<vigtigste>
// Brugdata
</main>
);
}
Lær mere om statisk gengivelse i Next.js 13 fra dok.
Inkrementel-statisk generation
Der er tidspunkter, hvor du vil bruge SSG, men også ønsker at opdatere indholdet regelmæssigt. Det er her inkrementel statisk generering (ISG) hjælper.
ISG giver dig mulighed for at oprette eller opdatere statiske sider, efter du har bygget dem efter det tidsinterval, du angiver. På denne måde behøver du ikke genopbygge hele webstedet, kun de sider, der har brug for det.
ISG bevarer fordelene ved SSG med den ekstra fordel at levere opdateret indhold til brugerne. ISG er perfekt til de sider på dit websted, der bruger skiftende data. Det kan du f.eks bruge ISR til at gengive blogindlæg sådan at bloggen forbliver opdateret, når du redigerer indlæg eller tilføjer nye.
For at bruge ISR skal du tilføje revalidate prop til getStaticProps-funktionen på en side.
eksportasynkronfungeregetStaticProps() {
konst res = vente hente('https://.../data')
konst data = vente res.json()
Vend tilbage {
rekvisitter: {
data,
},
genvalidere: 60
}
}
Her vil Next.js forsøge at genopbygge siden, når der kommer en anmodning efter 60 sekunder. Den næste anmodning vil resultere i et svar med den opdaterede side.
I Next.js 13 skal du bruge revalidate i hentning på denne måde:
hente('https://.../data', { næste: { revalidate: 60 } });
Du kan indstille tidsintervallet til det, der fungerer bedst med dine data.
Sådan vælger du en gengivelsesmetode
Indtil videre har du lært om de fire gengivelsesmetoder i Next.js — CSR, SSR, SSG og ISG. Hver af disse metoder er passende til forskellige situationer. CSR er nyttigt for sider, der har brug for friske data, hvor stærk SEO ikke er et problem. SSR er også fantastisk til sider, der forbruger dynamisk data, men det er mere SEO-venligt.
SSG er velegnet til sider, hvis data for det meste er statiske, mens ISG er bedst til sider, der indeholder data, du vil opdatere i intervaller. SSG og ISG er fantastiske med hensyn til ydeevne og SEO, da data er forudhentet, og du kan cache dem.