Čtenáři jako vy pomáhají podporovat MUO. Když provedete nákup pomocí odkazů na našich stránkách, můžeme získat provizi přidružené společnosti.

Vykreslování je proces převodu kódu React do HTML. Způsob vykreslování, který zvolíte, závisí na datech, se kterými pracujete, a na tom, jak moc vám záleží na výkonu.

V Next.js je vykreslování velmi univerzální. Stránky můžete vykreslovat na straně klienta nebo na straně serveru, staticky nebo přírůstkově.

Podívejte se, jak tyto metody fungují a jak fungují.

Vykreslování na straně serveru

Při vykreslování na straně serveru (SSR), když uživatel navštíví webovou stránku, prohlížeč odešle serveru požadavek na tuto stránku. Server v případě potřeby načte potřebná data z databáze a odešle je spolu s obsahem stránky do prohlížeče. Prohlížeč jej pak zobrazí uživateli.

Prohlížeč požaduje tento požadavek pro každý odkaz, na který uživatel klikne, což znamená, že server požadavek zpracuje pokaždé.

To může snížit výkon webu. Vykreslování na straně serveru je však ideální pro stránky, které spotřebovávají dynamická data.

instagram viewer

Použijte getServerSideProps k opětovnému sestavení stránky pokaždé, když o to uživatel požádá.

vývoznívýchozífunkceDomov({ data }) {
vrátit se (
<hlavní>
 // Použitídata
</main>
 );
}
vývozníasynchronnífunkcegetServerSideProps() {
// Načtení dat z externího rozhraní API
konst res = čekat načíst('https://.../data')
konst údaje = čekat res.json()
// Bude předáno komponentě stránky jako rekvizita
vrátit se { rekvizity: { data } }
}

getServerSideProps běží pouze na serveru a takto to běží:

  • Když uživatel přistoupí na stránku přímo, spustí se v době požadavku a stránka je předem vykreslena s rekvizitami, které vrací.
  • Když uživatel přistoupí na stránku prostřednictvím odkazu Další, prohlížeč odešle požadavek na server, který jej spouští.

V nové verzi se můžete přihlásit k vykreslování na straně serveru pomocí dynamického načítání dat na stránce nebo rozvržení.

Dynamické načítání dat jsou požadavky fetch(), které se specificky odhlásí z ukládání do mezipaměti nastavením možnosti mezipaměti na „no-store“.

vynést('https://...', { mezipaměti: 'no-store' });

Případně nastavte revalidate na 0:

vynést('https://...', { další: { revalidate: 0 } });

Tato funkce je aktuálně ve verzi beta, takže na to pamatujte. Více o dynamickém načítání dat si můžete přečíst v Další.js 13 beta dokumenty.

Vykreslování na straně klienta

Vykreslování na straně klienta (CSR) byste měli používat, když potřebujete často aktualizovat data nebo když nechcete svou stránku předběžně vykreslovat. CSR můžete implementovat na úrovni stránky nebo komponenty. Na úrovni stránky Next.js načítá data za běhu a když se to dělá na úrovni komponenty, načítá data při připojení. Z tohoto důvodu může CSR přispět ke snížení výkonu.

Použijte háček useEffect(). vykreslit stránky na klientovi takto:

import { useState, useEffect } z 'reagovat'
funkceDomov() {
konst [data, setData] = useState(nula)
konst [isLoading, setLoading] = useState(Nepravdivé)
useEffect(() => {
 setLoading(skutečný)


vynést('/api/get-data')
 .pak((res) => res.json())
 .pak((data) => {
 setData (data)
 setLoading(Nepravdivé)
 })
 }, [])


if (isLoading) return <p>Načítání...</str>
 pokud se (!data) vrátí <p>Žádná data</str>
vrátit se (
<div>
 // Použitídata
</div>
 )
}

Můžete také použít hák SWR. Ukládá data do mezipaměti a znovu je ověřuje v případě, že se zastarají.

import použitíSWR z 'swr'
const fetcher = (...args) => fetch(...args).then((res) => res.json())
funkceDomov() {
konst { data, chyba } = useSWR('/api/data', fetcher)
 pokud se (chyba) vrátí <div>Nepodařilo se načíst</div>
 pokud se (!data) vrátí <div>Načítání...</div>
vrátit se (
<div>
 // Použitídata
</div>
 )
}

V Next.js 13 musíte použít klientskou komponentu přidáním direktivy „use client“ do horní části souboru.

"použitíklienta";
vývoznívýchozí () => {
vrátit se (
<div>
// Klientská komponenta
</div>
 );
};

Rozdíl mezi SSR a CSR je v tom, že data jsou načítána při každém požadavku na stránku na serveru v SSR, zatímco data jsou načítána na straně klienta v CSR.

Generování statického webu

S generováním statického webu (SSG), stránka načítá data jednou během stavby. Staticky generované stránky jsou velmi rychlé a fungují dobře, protože všechny stránky jsou vytvořeny předem. SSG je proto ideální pro stránky, které používají statický obsah, jako jsou prodejní stránky nebo blogy.

V Next.js musíte exportovat funkci getStaticProps na stránku, kterou chcete staticky vykreslit.

vývoznívýchozífunkceDomov({ data }) {
vrátit se (
<hlavní>
 // Použitídata
</main>
 );
}
vývozníasynchronnífunkcegetStaticProps() {
// Načtení dat z externího rozhraní API v době sestavení
konst res = čekat načíst('https://.../data') 
konst údaje = čekat res.json()
// Bude předáno komponentě stránky jako rekvizita
vrátit se { rekvizity: { data } }
}

Můžete se také dotazovat na databázi uvnitř getStaticProps.

vývozníasynchronnífunkcegetStaticProps() {
 // Volánífunkcenavynéstdatazdatabáze
konst údaje = čekat getDataFromDB()
vrátit se { rekvizity: { data } }
}

V Next.js 13 je výchozím nastavením statické vykreslování a obsah se načítá a ukládá do mezipaměti, pokud nenastavíte možnost ukládání do mezipaměti.

asynchronnífunkcegetData() {
konst res = čekat načíst('https://.../data');
vrátit se res.json();
}
vývoznívýchozíasynchronnífunkceDomov() {
konst údaje = čekat getData();
vrátit se (
<hlavní>
 // Použitídata
</main>
 );
}

Dozvědět se víc o statické vykreslování v Next.js 13 z dokumentů.

Inkrementální-statické generování

Jsou chvíle, kdy chcete používat SSG, ale také chcete pravidelně aktualizovat obsah. Zde pomáhá inkrementální generování statické elektřiny (ISG).

ISG vám umožňuje vytvářet nebo aktualizovat statické stránky poté, co jste je sestavili po zadaném časovém intervalu. Tímto způsobem nemusíte přestavovat celý web, pouze stránky, které to potřebují.

ISG si zachovává výhody SSG s přidanou výhodou poskytování aktuálního obsahu uživatelům. ISG je ideální pro ty stránky na vašem webu, které spotřebovávají měnící se data. Například můžete použijte ISR k vykreslení blogových příspěvků takže blog zůstane aktualizovaný, když upravujete příspěvky nebo přidáváte nové.

Chcete-li použít ISR, přidejte prop revalidate k funkci getStaticProps na stránce.

vývozníasynchronnífunkcegetStaticProps() {
konst res = čekat načíst('https://.../data')
konst údaje = čekat res.json()
vrátit se {
 rekvizity: {
 data,
 },
 znovu ověřit: 60
 }
}

Zde se Next.js pokusí znovu sestavit stránku, když přijde požadavek po 60 sekundách. Další požadavek bude mít za následek odpověď s aktualizovanou stránkou.

V Next.js 13 použijte revalidate při načítání takto:

vynést('https://.../data', { další: { revalidate: 60 } });

Časový interval můžete nastavit podle toho, co nejlépe vyhovuje vašim datům.

Jak vybrat způsob vykreslování

Doposud jste se dozvěděli o čtyřech metodách vykreslování v Next.js – CSR, SSR, SSG a ISG. Každá z těchto metod je vhodná pro různé situace. CSR je užitečné pro stránky, které potřebují čerstvá data, kde není důležité silné SEO. SSR je také skvělé pro stránky, které spotřebovávají dynamická data, ale je šetrnější k SEO.

SSG je vhodné pro stránky, jejichž data jsou většinou statická, zatímco ISG je nejlepší pro stránky obsahující data, která chcete aktualizovat v intervalech. SSG a ISG jsou skvělé z hlediska výkonu a SEO, protože data jsou předem načtena a můžete je uložit do mezipaměti.