Home-theater-designers
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í.
VYTVOŘENÍ VIDEA DNE
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.
Použijte getServerSideProps k opětovnému sestavení stránky pokaždé, když o to uživatel požádá.
export default function Home({ data }) {
return (
<main>
// Use data
</main>
);
}
export async function getServerSideProps() {
// Fetch data from external api
const res = await fetch('https://.../data')
const data = await res.json()
// Will be passed to the page component as props
return { props: { 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í.
jak zjistit, zda jste byli zablokováni na snapchatu
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“.
fetch('https://...', { cache: 'no-store' });
Případně nastavte revalidate na 0:
fetch('https://...', { next: { 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:
jak najít adresu serveru na minecraft
import { useState, useEffect } from 'react'
function Home() {
const [data, setData] = useState(null)
const [isLoading, setLoading] = useState(false)
useEffect(() => {
setLoading(true)
fetch('/api/get-data')
.then((res) => res.json())
.then((data) => {
setData(data)
setLoading(false)
})
}, [])
if (isLoading) return <p>Loading...</p>
if (!data) return <p>No data</p>
return (
<div>
// Use 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 useSWR from 'swr'
const fetcher = (...args) => fetch(...args).then((res) => res.json())
function Home() {
const { data, error } = useSWR('/api/data', fetcher)
if (error) return <div>Failed to load</div>
if (!data) return <div>Loading...</div>
return (
<div>
// Use data
</div>
)
}
V Next.js 13 musíte použít klientskou komponentu přidáním direktivy „use client“ do horní části souboru.
"use client";
export default () => {
return (
<div>
// Client component
</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.
export default function Home({ data }) {
return (
<main>
// Use data
</main>
);
}
export async function getStaticProps() {
// Fetch data from external API at build time
const res = await fetch('https://.../data')
const data = await res.json()
// Will be passed to the page component as props
return { props: { data } }
}
Můžete se také dotazovat na databázi uvnitř getStaticProps.
export async function getStaticProps() {
// Call function to fetch data from database
const data = await getDataFromDB()
return { props: { 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.
sledování filmů zdarma online bez registrace
async function getData() {
const res = await fetch('https://.../data');
return res.json();
}
export default async function Home() {
const data = await getData();
return (
<main>
// Use 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 do funkce getStaticProps na stránce.
export async function getStaticProps() {
const res = await fetch('https://.../data')
const data = await res.json()
return {
props: {
data,
},
revalidate: 60
}
}
Zde se Next.js pokusí znovu sestavit stránku, když po 60 sekundách přijde požadavek. 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:
fetch('https://.../data', { next: { 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.