Az Önhöz hasonló olvasók támogatják a MUO-t. Amikor a webhelyünkön található linkek használatával vásárol, társult jutalékot kaphatunk.

A renderelés a React kód HTML formátumba konvertálásának folyamata. A választott megjelenítési módszer attól függ, hogy milyen adatokkal dolgozik, és mennyire törődik a teljesítményével.

A Next.js-ben a renderelés nagyon sokoldalú. Megjelenítheti az oldalakat kliens- vagy szerveroldalon, statikusan vagy növekményesen.

Tekintse meg, hogyan működnek ezek a módszerek, és mindegyik hogyan teljesít.

Szerveroldali renderelés

A szerveroldali rendering (SSR) esetén, amikor a felhasználó felkeres egy weboldalt, a böngésző kérést küld a szervernek az adott oldalra vonatkozóan. A szerver szükség esetén lekéri a szükséges adatokat az adatbázisból, és az oldal tartalmával együtt elküldi a böngészőnek. A böngésző ezután megjeleníti a felhasználó számára.

A böngésző ezt a kérést minden hivatkozásra végrehajtja, amelyre a felhasználó kattint, ami azt jelenti, hogy a szerver minden alkalommal feldolgozza a kérést.

instagram viewer

Ez csökkentheti a webhely teljesítményét. A szerveroldali megjelenítés azonban tökéletes olyan oldalakhoz, amelyek dinamikus adatokat fogyasztanak.

A getServerSideProps segítségével minden alkalommal újjáépítheti az oldalt, amikor egy felhasználó kéri.

exportalapértelmezettfunkcióitthon({ adat }) {
Visszatérés (
<fő->
 // Használatadat
</main>
 );
}
exportasyncfunkciógetServerSideProps() {
// Adatok lekérése külső API-ból
const res = várja fetch('https://.../data')
const adatok = várja res.json()
// Kellékként átkerül az oldalkomponenshez
Visszatérés { kellékek: { adat } }
}

A getServerSideProps csak a szerveren fut, és így fut:

  • Amikor a felhasználó közvetlenül hozzáfér az oldalhoz, az a kérés időpontjában lefut, és az oldal előre megjelenítődik a visszaadott kellékekkel.
  • Amikor a felhasználó egy Következő hivatkozáson keresztül éri el az oldalt, a böngésző kérést küld az azt futtató szervernek.

Az új verzióban engedélyezheti a szerveroldali megjelenítést dinamikus adatlehívások segítségével egy oldalon vagy egy elrendezésben.

A dinamikus adatlehívások olyan fetch() kérések, amelyek kifejezetten letiltják a gyorsítótárazást azáltal, hogy a cache beállítást „no-store” értékre állítják.

fetch('https://...', { gyorsítótár: 'bolt nélküli' });

Alternatív megoldásként állítsa az újraérvényesítést 0-ra:

fetch('https://...', { next: { revalidate: 0 } });

Ez a funkció jelenleg béta állapotban van, ezért ne feledje. A dinamikus adatlekérésekről bővebben itt olvashat Next.js 13 béta dokumentumok.

Kliens oldali renderelés

Használjon ügyféloldali megjelenítést (CSR), ha gyakran kell frissítenie az adatokat, vagy ha nem szeretné előre megjeleníteni az oldalt. A CSR-t oldal- vagy komponensszinten is megvalósíthatja. Az oldal szintjén a Next.js lekéri az adatokat futási időben, és ha az összetevő szintjén megtörténik, akkor a csatlakoztatáskor. Emiatt a CSR hozzájárulhat a lassú teljesítményhez.

Használja a useEffect() hook oldalak megjelenítéséhez a kliensen, így:

import { useState, useEffect } tól től 'reagál'
funkcióitthon() {
const [data, setData] = useState(nulla)
const [isLoading, setLoading] = useState(hamis)
useEffect(() => {
 setLoading(igaz)


fetch('/api/get-data')
 .then((res) => res.json())
 .then((data) => {
 setData (adat)
 setLoading(hamis)
 })
 }, [])


ha (isLoading) visszatér <p>Betöltés...</p>
 ha (!adat) visszatér <p>Nincs adat</p>
Visszatérés (
<div>
 // Használatadat
</div>
 )
}

Használhatja az SWR horgot is. Gyorsítótárazza az adatokat, és újraellenőrzi, ha elavulna.

import használd az SWR-t tól től 'swr'
const fetcher = (...args) => fetch(...args).then((res) => res.json())
funkcióitthon() {
const { adat, hiba } = useSWR('/api/adat', lekérő)
 ha (hiba) visszatér <div>Nem sikerült betölteni</div>
 ha (!adat) visszatér <div>Betöltés...</div>
Visszatérés (
<div>
 // Használatadat
</div>
 )
}

A Next.js 13-ban ügyfélösszetevőt kell használnia a "use client" direktíva hozzáadásával a fájl tetején.

"használatügyfél";
exportalapértelmezett () => {
Visszatérés (
<div>
// Kliens komponens
</div>
 );
};

A különbség az SSR és a CSR között az, hogy az adatok az SSR-ben a szerver minden oldalkérésekor, míg a CSR-ben az ügyféloldalon kerülnek lekérésre.

Statikus webhely generálása

Statikus helygenerálással (SSG), az oldal adatokat tölt le egyszer az építési idő alatt. A statikusan generált oldalak nagyon gyorsak és jól teljesítenek, mivel minden oldal előre elkészül. Az SSG ezért tökéletes olyan oldalakhoz, amelyek statikus tartalmat használnak, például értékesítési oldalak vagy blogok.

A Next.js programban exportálnia kell a getStaticProps függvényt a statikusan megjeleníteni kívánt oldalra.

exportalapértelmezettfunkcióitthon({ adat }) {
Visszatérés (
<fő->
 // Használatadat
</main>
 );
}
exportasyncfunkciógetStaticProps() {
// Adatok lekérése a külső API-ból összeállításkor
const res = várja fetch('https://.../data') 
const adatok = várja res.json()
// Kellékként átkerül az oldalkomponenshez
Visszatérés { kellékek: { adat } }
}

A getStaticProps-on belül is lekérdezheti az adatbázist.

exportasyncfunkciógetStaticProps() {
 // Hívásfunkciónak nekelhozniadattól tőladatbázis
const adatok = várja getDataFromDB()
Visszatérés { kellékek: { adat } }
}

A Next.js 13-ban a statikus megjelenítés az alapértelmezett, és a tartalom lekérése és gyorsítótárazása történik meg, hacsak nem kapcsolja ki a gyorsítótárazási beállítást.

asyncfunkciógetData() {
const res = várja fetch('https://.../data');
Visszatérés res.json();
}
exportalapértelmezettasyncfunkcióitthon() {
const adatok = várja getData();
Visszatérés (
<fő->
 // Használatadat
</main>
 );
}

Tudj meg többet statikus megjelenítés a Next.js 13-ban a doksiból.

Növekményes statikus generálás

Vannak esetek, amikor az SSG-t szeretné használni, de rendszeresen frissíteni szeretné a tartalmat. Itt segít az inkrementális statikus generálás (ISG).

Az ISG lehetővé teszi statikus oldalak létrehozását vagy frissítését, miután elkészítette őket a megadott időintervallum után. Így nem kell újraépítenie a teljes webhelyet, csak azokat az oldalakat, amelyeknek szüksége van rá.

Az ISG megtartja az SSG előnyeit, azzal a plusz előnnyel, hogy naprakész tartalmat kínál a felhasználóknak. Az ISG tökéletes a webhely azon oldalaihoz, amelyek változó adatokat fogyasztanak. Például megteheti használja az ISR-t a blogbejegyzések megjelenítéséhez így a blog naprakész marad, amikor bejegyzéseket szerkeszt vagy újakat ad hozzá.

Az ISR használatához adja hozzá a revalidate propot a getStaticProps függvényhez egy oldalon.

exportasyncfunkciógetStaticProps() {
const res = várja fetch('https://.../data')
const adatok = várja res.json()
Visszatérés {
 kellékek: {
 adat,
 },
 újraérvényesítés: 60
 }
}

Itt a Next.js megpróbálja újraépíteni az oldalt, ha 60 másodperc után érkezik egy kérés. A következő kérésre a frissített oldallal válaszolunk.

A Next.js 13-ban használja a revalidate-ot a lekérésben, így:

fetch('https://.../data', { next: { revalidate: 60 } });

Beállíthatja az időintervallumot arra, ami a legjobban működik az adatokkal.

Hogyan válasszunk renderelési módot

Eddig megismerte a Next.js négy megjelenítési módszerét – CSR, SSR, SSG és ISG. Ezen módszerek mindegyike különböző helyzetekben megfelelő. A CSR hasznos azoknál az oldalakon, ahol friss adatokra van szükség, ahol az erős SEO nem aggodalomra ad okot. Az SSR olyan oldalakhoz is kiváló, amelyek dinamikus adatokat fogyasztanak, de SEO-barátabb.

Az SSG olyan oldalakhoz alkalmas, amelyek adatai többnyire statikusak, míg az ISG olyan oldalakhoz, amelyek időközönként frissíteni kívánt adatokat tartalmaznak. Az SSG és az ISG nagyszerűek a teljesítmény és a SEO szempontjából, mivel az adatok előre le vannak töltve, és gyorsítótárazhatók.