Lezers zoals jij steunen MUO. Wanneer u een aankoop doet via links op onze site, kunnen we een aangesloten commissie verdienen.

Renderen is het proces waarbij React-code wordt omgezet in HTML. De weergavemethode die u kiest, hangt af van de gegevens waarmee u werkt en hoeveel belang u hecht aan prestaties.

In Next.js is renderen zeer veelzijdig. U kunt pagina's client-side of server-side, statisch of incrementeel renderen.

Bekijk hoe deze methoden werken en hoe ze allemaal presteren.

Rendering aan de serverzijde

Met server-side rendering (SSR), wanneer een gebruiker een webpagina bezoekt, stuurt de browser een verzoek naar de server voor die pagina. De server haalt indien nodig de benodigde gegevens uit de database en stuurt deze samen met de inhoud van de pagina naar de browser. De browser geeft het vervolgens weer aan de gebruiker.

De browser doet dit verzoek voor elke link waarop de gebruiker klikt, wat betekent dat de server het verzoek elke keer verwerkt.

Dit kan de prestaties van de website verminderen. Server-side rendering is echter perfect voor pagina's die dynamische gegevens verbruiken.

instagram viewer

Gebruik getServerSideProps om de pagina opnieuw op te bouwen elke keer dat een gebruiker erom vraagt.

exporterenstandaardfunctieThuis({ gegevens }) {
opbrengst (
<voornaamst>
 // Gebruikgegevens
</main>
 );
}
exporterenasynchroonfunctiegetServerSideProps() {
// Gegevens ophalen van externe api
const res = wachten ophalen('https://.../data')
const gegevens = wachten res.json()
// Wordt als rekwisieten doorgegeven aan de paginacomponent
opbrengst { rekwisieten: { gegevens } }
}

getServerSideProps draait alleen op de server en zo werkt het:

  • Wanneer een gebruiker de pagina rechtstreeks opent, wordt deze op verzoek uitgevoerd en wordt de pagina vooraf gerenderd met de rekwisieten die worden geretourneerd.
  • Wanneer een gebruiker de pagina opent via een Volgende-link, stuurt de browser een verzoek naar de server waarop de pagina wordt uitgevoerd.

In de nieuwe versie kunt u kiezen voor weergave aan de serverzijde met behulp van dynamische gegevensophaalacties in een pagina of lay-out.

Dynamische gegevensophaalacties zijn fetch()-verzoeken die zich specifiek afmelden voor caching door de cache-optie in te stellen op "no-store".

ophalen('https://...', {cache: 'geen winkel' });

Of stel opnieuw valideren in op 0:

ophalen('https://...', { volgende: { opnieuw valideren: 0 } });

Deze functie is momenteel in bèta, dus houd daar rekening mee. U kunt meer lezen over het ophalen van dynamische gegevens in de Next.js 13 bètadocumenten.

Rendering aan clientzijde

U moet client-side rendering (CSR) gebruiken wanneer u regelmatig gegevens moet bijwerken of wanneer u uw pagina niet vooraf wilt renderen. U kunt MVO implementeren op paginaniveau of op componentniveau. Op paginaniveau haalt Next.js gegevens op tijdens runtime en wanneer het op componentniveau wordt gedaan, haalt het gegevens op bij het koppelen. Hierdoor kan MVO bijdragen aan trage prestaties.

Gebruik de gebruikEffect() haak om pagina's op de client als volgt weer te geven:

importeren { useState, useEffect } van 'Reageer'
functieThuis() {
const [data, setData] = useState(nul)
const [isLoading, setLoading] = useState(vals)
gebruikEffect(() => {
 setBezig met laden(WAAR)


ophalen('/api/get-data')
 .toen((res) => res.json())
 .dan((gegevens) => {
 setData (gegevens)
 setBezig met laden(vals)
 })
 }, [])


als (isLoading) terugkeert <P>Bezig met laden...</P>
 als (!gegevens) terugkeren <P>Geen gegevens</P>
opbrengst (
<div>
 // Gebruikgegevens
</div>
 )
}

U kunt ook de SWR-haak gebruiken. Het slaat de gegevens op in de cache en valideert ze opnieuw voor het geval ze oud worden.

importeren gebruik SWR van 'swr'
const fetcher = (...args) => fetch(...args).dan((res) => res.json())
functieThuis() {
const { gegevens, fout } = gebruikSWR('/api/gegevens', ophalen)
 als (fout) terugkeren <div>Laden mislukt</div>
 als (!gegevens) terugkeren <div>Bezig met laden...</div>
opbrengst (
<div>
 // Gebruikgegevens
</div>
 )
}

In Next.js 13 moet u een clientcomponent gebruiken door de instructie "use client" bovenaan het bestand toe te voegen.

"gebruikcliënt";
exporterenstandaard () => {
opbrengst (
<div>
// Client-component
</div>
 );
};

Het verschil tussen SSR en CSR is dat de gegevens worden opgehaald bij elk paginaverzoek op de server in SSR, terwijl de gegevens worden opgehaald aan de clientzijde in CSR.

Generatie van statische sites

Met het genereren van statische sites (SSG), de pagina haalt gegevens op eenmaal tijdens de bouw. Statisch gegenereerde pagina's zijn erg snel en presteren goed omdat alle pagina's vooraf zijn gebouwd. SSG is daarom perfect voor pagina's die statische inhoud gebruiken, zoals verkooppagina's of blogs.

In Next.js moet u de functie getStaticProps exporteren naar de pagina die u statisch wilt weergeven.

exporterenstandaardfunctieThuis({ gegevens }) {
opbrengst (
<voornaamst>
 // Gebruikgegevens
</main>
 );
}
exporterenasynchroonfunctiegetStaticProps() {
// Gegevens ophalen van externe API tijdens het bouwen
const res = wachten ophalen('https://.../data') 
const gegevens = wachten res.json()
// Wordt als rekwisieten doorgegeven aan de paginacomponent
opbrengst { rekwisieten: { gegevens } }
}

U kunt ook de database in getStaticProps opvragen.

exporterenasynchroonfunctiegetStaticProps() {
 // Telefoongesprekfunctienaarophalengegevensvandatabank
const gegevens = wachten haalGegevensVanDB()
opbrengst { rekwisieten: { gegevens } }
}

In Next.js 13 is statische weergave de standaard en wordt inhoud opgehaald en in de cache opgeslagen, tenzij u de cachingoptie uitschakelt.

asynchroonfunctiegegevens verkrijgen() {
const res = wachten ophalen('https://.../data');
opbrengst res.json();
}
exporterenstandaardasynchroonfunctieThuis() {
const gegevens = wachten gegevens verkrijgen();
opbrengst (
<voornaamst>
 // Gebruikgegevens
</main>
 );
}

Leer meer over statische weergave in Next.js 13 uit de documenten.

Incrementeel-statische generatie

Er zijn momenten waarop u SSG wilt gebruiken, maar ook regelmatig de inhoud wilt bijwerken. Dit is waar incrementele statische generatie (ISG) helpt.

Met ISG kunt u statische pagina's maken of bijwerken nadat u ze hebt gebouwd na het tijdsinterval dat u opgeeft. Op deze manier hoeft u niet de hele site opnieuw op te bouwen, alleen de pagina's die dit nodig hebben.

ISG behoudt de voordelen van SSG met als bijkomend voordeel dat gebruikers up-to-date content kunnen ontvangen. ISG is perfect voor die pagina's op uw site die veranderende gegevens verbruiken. Dat kan bijvoorbeeld gebruik ISR om blogberichten weer te geven zodat de blog up-to-date blijft wanneer u berichten bewerkt of nieuwe toevoegt.

Om ISR te gebruiken, voegt u de revalidate-prop toe aan de functie getStaticProps op een pagina.

exporterenasynchroonfunctiegetStaticProps() {
const res = wachten ophalen('https://.../data')
const gegevens = wachten res.json()
opbrengst {
 rekwisieten: {
 gegevens,
 },
 hervalideren: 60
 }
}

Hier zal Next.js proberen de pagina opnieuw op te bouwen wanneer er na 60 seconden een verzoek binnenkomt. Het volgende verzoek zal resulteren in een reactie met de bijgewerkte pagina.

Gebruik in Next.js 13 revalidate in fetch als volgt:

ophalen('https://.../data', { volgende: { hervalideren: 60 } });

U kunt het tijdsinterval instellen op wat het beste werkt met uw gegevens.

Hoe een weergavemethode te kiezen

Tot nu toe heb je kennis gemaakt met de vier weergavemethoden in Next.js: CSR, SSR, SSG en ISG. Elk van deze methoden is geschikt voor verschillende situaties. CSR is handig voor pagina's die nieuwe gegevens nodig hebben, waar sterke SEO geen probleem is. SSR is ook geweldig voor pagina's die dynamische gegevens verbruiken, maar het is SEO-vriendelijker.

SSG is geschikt voor pagina's waarvan de gegevens grotendeels statisch zijn, terwijl ISG het beste is voor pagina's met gegevens die u met tussenpozen wilt bijwerken. SSG en ISG zijn geweldig in termen van prestaties en SEO, omdat gegevens vooraf worden opgehaald en u deze kunt cachen.