Čitatelia ako vy pomáhajú podporovať MUO. Keď uskutočníte nákup pomocou odkazov na našej stránke, môžeme získať pridruženú províziu.
Rendering je proces konverzie kódu React do HTML. Spôsob vykresľovania, ktorý si vyberiete, závisí od údajov, s ktorými pracujete, a od toho, ako veľmi vám záleží na výkone.
V Next.js je vykresľovanie veľmi všestranné. Stránky môžete vykresľovať na strane klienta alebo na strane servera, staticky alebo prírastkovo.
Pozrite sa, ako tieto metódy fungujú a ako každá funguje.
Vykresľovanie na strane servera
Pri vykresľovaní na strane servera (SSR), keď používateľ navštívi webovú stránku, prehliadač odošle serveru požiadavku na túto stránku. Server v prípade potreby načíta potrebné údaje z databázy a odošle ich spolu s obsahom stránky do prehliadača. Prehliadač ho potom zobrazí používateľovi.
Prehliadač zadáva túto požiadavku pre každý odkaz, na ktorý používateľ klikne, čo znamená, že server požiadavku vždy spracuje.
To môže znížiť výkon webovej stránky. Vykresľovanie na strane servera je však ideálne pre stránky, ktoré spotrebúvajú dynamické údaje.
Použite getServerSideProps na prebudovanie stránky vždy, keď o to používateľ požiada.
exportpredvolenáfunkciuDomov({ údaje }) {
vrátiť (
<Hlavná>
// Použiteúdajov
</main>
);
}exportasyncfunkciugetServerSideProps() {
// Získanie údajov z externého rozhrania API
konšt res = čakať načítať('https://.../data')
konšt údaje = čakať res.json()
// Bude odovzdaný komponentu stránky ako rekvizita
vrátiť { rekvizity: { údaje } }
}
getServerSideProps beží iba na serveri a takto to beží:
- Keď používateľ pristúpi na stránku priamo, spustí sa v čase vyžiadania a stránka sa vopred vykreslí s rekvizitami, ktoré vráti.
- Keď používateľ pristúpi na stránku prostredníctvom odkazu Ďalej, prehliadač odošle požiadavku na server, ktorý ju spúšťa.
V novej verzii sa môžete prihlásiť do vykresľovania na strane servera pomocou dynamického načítavania údajov na stránke alebo v rozložení.
Dynamické načítanie údajov sú požiadavky fetch(), ktoré špecificky deaktivujú ukladanie do vyrovnávacej pamäte nastavením možnosti vyrovnávacej pamäte na „no-store“.
priniesť ('https://...', { vyrovnávacia pamäť: 'no-store' });
Prípadne nastavte revalidate na 0:
priniesť ('https://...', { dalsi: { revalidate: 0 } });
Táto funkcia je momentálne vo verzii beta, takže na to pamätajte. Viac o dynamickom načítavaní údajov si môžete prečítať v Next.js 13 beta dokumenty.
Vykresľovanie na strane klienta
Vykresľovanie na strane klienta (CSR) by ste mali použiť, keď potrebujete často aktualizovať údaje alebo keď nechcete svoju stránku predbežne vykresľovať. CSR môžete implementovať na úrovni stránky alebo komponentu. Na úrovni stránky Next.js načítava údaje v čase spustenia a keď sa to robí na úrovni komponentu, načítava údaje pri pripojení. Z tohto dôvodu môže CSR prispieť k spomaleniu výkonu.
Použi háčik useEffect(). na vykreslenie stránok na klientovi takto:
importovať { useState, useEffect } od 'reagovať'
funkciuDomov() {
konšt [data, setData] = useState(nulový)
konšt [isLoading, setLoading] = useState(falošný)useEffect(() => {
setLoading(pravda)priniesť ('/api/get-data')
.potom((res) => res.json())
.potom((údaje) => {
setData (údaje)
setLoading(falošný)
})
}, [])if (isLoading) return <p>Načítava...</str>
ak sa (!údaje) vrátia <p>Žiadne dáta</str>
vrátiť (
<div>
// Použiteúdajov
</div>
)
}
Môžete tiež použiť hák SWR. Ukladá údaje do vyrovnávacej pamäte a opätovne ich overuje v prípade, že sa zastarajú.
importovať použitie SWR od 'swr'
const fetcher = (...args) => fetch(...args).then((res) => res.json())
funkciuDomov() {
konšt { data, chyba } = useSWR('/api/data', fetcher)
ak sa (chyba) vráti <div>Nepodarilo sa načítať</div>
ak sa (!údaje) vrátia <div>Načítava...</div>
vrátiť (
<div>
// Použiteúdajov
</div>
)
}
V Next.js 13 musíte použiť komponent klienta pridaním direktívy „use client“ na začiatok súboru.
"použitiezákazník";
exportpredvolená () => {
vrátiť (
<div>
// Klientsky komponent
</div>
);
};
Rozdiel medzi SSR a CSR je v tom, že údaje sa načítajú pri každej požiadavke na stránku na serveri v SSR, zatiaľ čo údaje sa načítajú na strane klienta v CSR.
Generovanie statických stránok
S generovaním statických stránok (SSG), stránka načíta údaje raz počas výstavby. Staticky generované stránky sú veľmi rýchle a fungujú dobre, pretože všetky stránky sú vytvorené vopred. SSG je preto ideálny pre stránky, ktoré používajú statický obsah, ako sú predajné stránky alebo blogy.
V Next.js musíte exportovať funkciu getStaticProps na stránku, ktorú chcete staticky vykresliť.
exportpredvolenáfunkciuDomov({ údaje }) {
vrátiť (
<Hlavná>
// Použiteúdajov
</main>
);
}exportasyncfunkciugetStaticProps() {
// Získanie údajov z externého rozhrania API v čase zostavenia
konšt res = čakať načítať('https://.../data')
konšt údaje = čakať res.json()
// Bude odovzdaný komponentu stránky ako rekvizita
vrátiť { rekvizity: { údaje } }
}
Môžete tiež dotazovať databázu v getStaticProps.
exportasyncfunkciugetStaticProps() {
// Zavolajtefunkciudoaportúdajovoddatabázy
konšt údaje = čakať getDataFromDB()
vrátiť { rekvizity: { údaje } }
}
V Next.js 13 je predvolené statické vykresľovanie a obsah sa načítava a ukladá do vyrovnávacej pamäte, pokiaľ nevypnete možnosť ukladania do vyrovnávacej pamäte.
asyncfunkciugetData() {
konšt res = čakať načítať('https://.../data');
vrátiť res.json();
}
exportpredvolenáasyncfunkciuDomov() {
konšt údaje = čakať getData();
vrátiť (
<Hlavná>
// Použiteúdajov
</main>
);
}
Naučiť sa viac o statické vykresľovanie v Next.js 13 z dokumentov.
Inkrementálne-statické generovanie
Sú chvíle, keď chcete používať SSG, ale zároveň chcete pravidelne aktualizovať obsah. Tu pomáha inkrementálne generovanie statickej energie (ISG).
ISG vám umožňuje vytvárať alebo aktualizovať statické stránky po ich vytvorení po vami určenom časovom intervale. Týmto spôsobom nemusíte prestavovať celý web, iba stránky, ktoré to potrebujú.
ISG si zachováva výhody SSG s ďalšou výhodou poskytovania aktuálneho obsahu používateľom. ISG je ideálny pre tie stránky na vašom webe, ktoré spotrebúvajú meniace sa údaje. Napríklad môžete použite ISR na vykreslenie blogových príspevkov takže blog zostane aktualizovaný, keď upravíte príspevky alebo pridáte nové.
Ak chcete použiť ISR, pridajte prop revalidate do funkcie getStaticProps na stránke.
exportasyncfunkciugetStaticProps() {
konšt res = čakať načítať('https://.../data')
konšt údaje = čakať res.json()
vrátiť {
rekvizity: {
údaje,
},
preveriť platnosť: 60
}
}
Tu sa Next.js pokúsi znovu vytvoriť stránku, keď po 60 sekundách príde požiadavka. Nasledujúca požiadavka bude mať za následok odpoveď s aktualizovanou stránkou.
V Next.js 13 použite revalidate pri načítaní takto:
priniesť ('https://.../data', { ďalší: { revalidate: 60 } });
Časový interval môžete nastaviť podľa toho, čo najlepšie funguje s vašimi údajmi.
Ako si vybrať spôsob vykresľovania
Doteraz ste sa dozvedeli o štyroch metódach vykresľovania v Next.js – CSR, SSR, SSG a ISG. Každá z týchto metód je vhodná pre rôzne situácie. CSR je užitočná pre stránky, ktoré potrebujú čerstvé dáta, kde nie je dôležité silné SEO. SSR je tiež skvelé pre stránky, ktoré spotrebúvajú dynamické dáta, ale je vhodnejšie pre SEO.
SSG je vhodný pre stránky, ktorých údaje sú väčšinou statické, zatiaľ čo ISG je najlepšie pre stránky obsahujúce údaje, ktoré chcete aktualizovať v intervaloch. SSG a ISG sú skvelé z hľadiska výkonu a SEO, pretože údaje sú vopred načítané a môžete ich uložiť do vyrovnávacej pamäte.
