Cititorii ca tine ajută la sprijinirea MUO. Când efectuați o achiziție folosind link-uri de pe site-ul nostru, este posibil să câștigăm un comision de afiliat.

Redarea este procesul de conversie a codului React în HTML. Metoda de randare pe care o alegeți depinde de datele cu care lucrați și de cât de mult vă pasă de performanță.

În Next.js, redarea este foarte versatilă. Puteți reda paginile pe partea client sau pe partea serverului, static sau incremental.

Priviți cum funcționează aceste metode și cum funcționează fiecare.

Redare pe partea serverului

Cu randarea pe server (SSR), atunci când un utilizator vizitează o pagină web, browserul trimite o solicitare serverului pentru pagina respectivă. Serverul preia datele necesare din baza de date, dacă este necesar, și le trimite împreună cu conținutul paginii către browser. Browserul îl afișează apoi utilizatorului.

Browserul face această solicitare pentru fiecare link pe care utilizatorul face clic, ceea ce înseamnă că serverul procesează cererea de fiecare dată.

instagram viewer

Acest lucru poate reduce performanța site-ului. Cu toate acestea, randarea pe server este perfectă pentru paginile care consumă date dinamice.

Utilizați getServerSideProps pentru a reconstrui pagina de fiecare dată când un utilizator o solicită.

exportMod implicitfuncţieAcasă({ date }) {
întoarcere (
<principal>
 // Utilizaredate
</main>
 );
}
exportasincronfuncţiegetServerSideProps() {
// Preluați datele de la API externă
const res = asteapta prelua('https://.../data')
const date = asteapta res.json()
// Va fi transmis la componenta paginii ca elemente de recuzită
întoarcere { recuzită: { date } }
}

getServerSideProps rulează numai pe server și acesta este modul în care rulează:

  • Când un utilizator accesează pagina direct, aceasta rulează la momentul solicitării și pagina este pre-redată cu elementele de recuzită pe care le returnează.
  • Când un utilizator accesează pagina printr-un link Următorul, browserul trimite o solicitare serverului care o rulează.

În noua versiune, puteți opta pentru randarea pe server folosind preluări dinamice de date într-o pagină sau într-un aspect.

Preluările dinamice de date sunt solicitări fetch() care renunță în mod specific la stocarea în cache prin setarea opțiunii de cache la „no-store”.

aduce('https://...', { cache: 'fără magazin' });

Alternativ, setați revalidate la 0:

aduce('https://...', { următorul: { revalidează: 0 } });

Această funcție este în prezent în versiune beta, așa că rețineți asta. Puteți citi mai multe despre preluarea dinamică a datelor în Next.js 13 documente beta.

Redare pe partea clientului

Ar trebui să utilizați redarea pe partea clientului (CSR) atunci când trebuie să actualizați frecvent datele sau când nu doriți să vă pre-rendați pagina. Puteți implementa CSR la nivel de pagină sau la nivel de componentă. La nivel de pagină, Next.js preia date în timpul execuției și, când este finalizat la nivel de componentă, preia datele de pe montare. Din această cauză, CSR poate contribui la încetinirea performanței.

Folosește useEffect() cârlig pentru a reda pagini pe client astfel:

import { useState, useEffect } din 'reacţiona'
funcţieAcasă() {
const [date, setData] = useState(nul)
const [isLoading, setLoading] = useState(fals)
useEffect(() => {
 setLoading(Adevărat)


aduce('/api/get-data')
 .then((res) => res.json())
 .atunci((date) => {
 setData (date)
 setLoading(fals)
 })
 }, [])


dacă (se încarcă) returnează <p>Se încarcă...</p>
 dacă (!date) revin <p>Nu există date</p>
întoarcere (
<div>
 // Utilizaredate
</div>
 )
}

Puteți folosi și cârligul SWR. Memorează în cache datele și le revalidează în cazul în care devin învechite.

import utilizați SWR din 'swr'
const fetcher = (...args) => fetch(...args).then((res) => res.json())
funcţieAcasă() {
const { date, error } = useSWR('/api/date', fetcher)
 dacă (eroare) revine <div>Incarcarea a esuat</div>
 dacă (!date) revin <div>Se încarcă...</div>
întoarcere (
<div>
 // Utilizaredate
</div>
 )
}

În Next.js 13, trebuie să utilizați o componentă client adăugând directiva „use client” în partea de sus a fișierului.

"utilizareclient";
exportMod implicit () => {
întoarcere (
<div>
// Componenta client
</div>
 );
};

Diferența dintre SSR și CSR este că datele sunt preluate la fiecare cerere de pagină de pe server în SSR, în timp ce datele sunt preluate de partea clientului în CSR.

Generare statică-site

Cu generarea site-ului static (SSG), pagina preia date o dată în timpul construirii. Paginile generate static sunt foarte rapide și funcționează bine, deoarece toate paginile sunt construite în prealabil. Prin urmare, SSG este perfect pentru paginile care folosesc conținut static, cum ar fi paginile de vânzări sau blogurile.

În Next.js, trebuie să exportați funcția getStaticProps în pagina pe care doriți să o redați static.

exportMod implicitfuncţieAcasă({ date }) {
întoarcere (
<principal>
 // Utilizaredate
</main>
 );
}
exportasincronfuncţiegetStaticProps() {
// Preluați datele din API-ul extern în momentul construirii
const res = asteapta prelua('https://.../data') 
const date = asteapta res.json()
// Va fi transmis la componenta paginii ca elemente de recuzită
întoarcere { recuzită: { date } }
}

De asemenea, puteți interoga baza de date în getStaticProps.

exportasincronfuncţiegetStaticProps() {
 // ApelfuncţielaaducedatedinBază de date
const date = asteapta getDataFromDB()
întoarcere { recuzită: { date } }
}

În Next.js 13, randarea statică este implicită, iar conținutul este preluat și stocat în cache, cu excepția cazului în care dezactivați opțiunea de stocare în cache.

asincronfuncţieObțineți date() {
const res = asteapta prelua('https://.../data');
întoarcere res.json();
}
exportMod implicitasincronfuncţieAcasă() {
const date = asteapta Obțineți date();
întoarcere (
<principal>
 // Utilizaredate
</main>
 );
}

Află mai multe despre randare statică în Next.js 13 din documente.

Generare incremental-statică

Există momente în care doriți să utilizați SSG, dar doriți și să actualizați conținutul în mod regulat. Aici ajută generarea statică incrementală (ISG).

ISG vă permite să creați sau să actualizați pagini statice după ce le-ați construit după intervalul de timp specificat. În acest fel, nu trebuie să reconstruiți întregul site doar paginile care au nevoie de el.

ISG păstrează beneficiile SSG cu avantajul suplimentar de a oferi utilizatorilor conținut actualizat. ISG este perfect pentru acele pagini de pe site-ul dvs. care consumă date în schimbare. De exemplu, poți utilizați ISR ​​pentru a reda postări de blog astfel încât blogul să rămână actualizat atunci când editați postări sau adăugați altele noi.

Pentru a utiliza ISR, adăugați prop revalidate la funcția getStaticProps dintr-o pagină.

exportasincronfuncţiegetStaticProps() {
const res = asteapta prelua('https://.../data')
const date = asteapta res.json()
întoarcere {
 recuzită: {
 date,
 },
 revalidare: 60
 }
}

Aici, Next.js va încerca să reconstruiască pagina când vine o solicitare după 60 de secunde. Următoarea solicitare va avea ca rezultat un răspuns cu pagina actualizată.

În Next.js 13, utilizați revalidate în preluare astfel:

aduce('https://.../data', { următorul: { revalidate: 60 } });

Puteți seta intervalul de timp la ceea ce funcționează cel mai bine cu datele dvs.

Cum să alegeți o metodă de redare

Până acum ați aflat despre cele patru metode de randare din Next.js - CSR, SSR, SSG și ISG. Fiecare dintre aceste metode este potrivită pentru diferite situații. CSR este util pentru paginile care au nevoie de date proaspete, unde SEO puternic nu este o preocupare. SSR este excelent și pentru paginile care consumă date dinamice, dar este mai prietenos cu SEO.

SSG este potrivit pentru paginile ale căror date sunt în mare parte statice, în timp ce ISG este cel mai bun pentru paginile care conțin date pe care doriți să le actualizați la intervale. SSG și ISG sunt excelente în ceea ce privește performanța și SEO, deoarece datele sunt preluate în prealabil și le puteți stoca în cache.