Home-theater-designers
Renderēšana ir process, kurā React kods tiek pārveidots par HTML. Jūsu izvēlētā renderēšanas metode ir atkarīga no datiem, ar kuriem strādājat, un no tā, cik ļoti jums rūp veiktspēja.
Programmā Next.js renderēšana ir ļoti daudzpusīga. Varat renderēt lapas klienta vai servera pusē, statiski vai pakāpeniski.
Apskatiet, kā šīs metodes darbojas un kā katra darbojas.
DIENAS VIDEO MAKEUSEOF
Servera puses renderēšana
Izmantojot servera puses renderēšanu (SSR), kad lietotājs apmeklē tīmekļa lapu, pārlūkprogramma nosūta serverim pieprasījumu par šo lapu. Ja nepieciešams, serveris ienes nepieciešamos datus no datu bāzes un kopā ar lapas saturu nosūta tos pārlūkprogrammai. Pēc tam pārlūkprogramma to parāda lietotājam.
Pārlūkprogramma veic šo pieprasījumu par katru saiti, uz kuras lietotājs noklikšķina, kas nozīmē, ka serveris katru reizi apstrādā pieprasījumu.
Tas var samazināt vietnes veiktspēju. Tomēr servera puses renderēšana ir lieliski piemērota lapām, kas patērē dinamiskus datus.
Izmantojiet getServerSideProps, lai atjaunotu lapu katru reizi, kad lietotājs to pieprasa.
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 darbojas tikai serverī, un tas darbojas šādi:
- Kad lietotājs tieši piekļūst lapai, tā tiek palaista pēc pieprasījuma, un lapa tiek iepriekš renderēta ar tās atdotajiem rekvizītiem.
- Kad lietotājs piekļūst lapai, izmantojot saiti Nākamais, pārlūkprogramma nosūta pieprasījumu serverim, kas to palaiž.
Jaunajā versijā varat izvēlēties servera puses renderēšanu, izmantojot dinamiskus datu ienesumus lapā vai izkārtojumā.
Dinamiskās datu ielādes ir fetch() pieprasījumi, kas īpaši atsakās no saglabāšanas kešatmiņā, kešatmiņas opciju iestatot uz “no-store”.
fetch('https://...', { cache: 'no-store' });
Vai arī iestatiet atkārtotu apstiprināšanu uz 0:
kāpēc mans telefons internetā pēkšņi ir tik lēns?
fetch('https://...', { next: { revalidate: 0 } });
Šī funkcija pašlaik ir beta versijā, tāpēc paturiet to prātā. Plašāku informāciju par dinamisko datu ienesi varat lasīt sadaļā Next.js 13 beta dokumenti .
Renderēšana klienta pusē
Izmantojiet klienta puses renderēšanu (CSR), ja jums ir bieži jāatjaunina dati vai ja nevēlaties iepriekš renderēt savu lapu. CSR varat ieviest lapas vai komponentu līmenī. Lapas līmenī Next.js ienes datus izpildes laikā, un, kad tas tiek darīts komponenta līmenī, tas ienes datus montēšanas laikā. Šī iemesla dēļ KSA var veicināt lēnu darbību.
Izmantojiet useEffect() āķis lai atveidotu klienta lapas šādi:
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>
)
}
Varat arī izmantot SWR āķi. Tas saglabā datus kešatmiņā un atkārtoti apstiprina tos, ja tie kļūst novecojuši.
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>
)
}
Programmā Next.js 13 ir jāizmanto klienta komponents, faila augšdaļā pievienojot direktīvu 'lietot klientu'.
"use client";
export default () => {
return (
<div>
// Client component
</div>
);
};
Atšķirība starp SSR un CSR ir tāda, ka dati tiek ielādēti katrā SSR servera lapas pieprasījumā, savukārt CSR dati tiek iegūti klienta pusē.
Statiskās vietnes ģenerēšana
Ar statiskās vietnes ģenerēšanu (SSG), lapa ienes datus vienreiz būvēšanas laikā. Statiskās lapas ir ļoti ātras un darbojas labi, jo visas lapas ir izveidotas iepriekš. Tāpēc SSG ir lieliski piemērots lapām, kurās tiek izmantots statisks saturs, piemēram, pārdošanas lapām vai emuāriem.
operētājsistēmai Windows 7 nepieciešama atļauja šīs darbības veikšanai
Programmā Next.js ir jāeksportē funkcija getStaticProps tajā lapā, kuru vēlaties statiski renderēt.
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 } }
}
Varat arī vaicāt datu bāzi iekš getStaticProps.
export async function getStaticProps() {
// Call function to fetch data from database
const data = await getDataFromDB()
return { props: { data } }
}
Programmā Next.js 13 statiskā renderēšana ir noklusējuma iestatījums, un saturs tiek ielādēts un saglabāts kešatmiņā, ja vien neesat izslēdzis kešatmiņas opciju.
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>
);
}
Uzziniet vairāk par statiskā renderēšana programmā Next.js 13 no dokumentiem.
Inkrementālā statiskā ģenerēšana
Ir gadījumi, kad vēlaties izmantot SSG, taču vēlaties regulāri atjaunināt saturu. Šeit palīdz pakāpeniskā statiskā ģenerēšana (ISG).
ISG ļauj izveidot vai atjaunināt statiskas lapas pēc tam, kad tās ir izveidotas pēc norādītā laika intervāla. Tādā veidā jums nav jāpārveido visa vietne tikai tās lapas, kurām tas ir nepieciešams.
ISG saglabā SSG priekšrocības ar papildu priekšrocību, sniedzot lietotājiem jaunāko saturu. ISG ir lieliski piemērots tām jūsu vietnes lapām, kurās tiek izmantoti mainīgi dati. Piemēram, jūs varat izmantojiet ISR, lai renderētu emuāra ziņas lai emuārs tiktu atjaunināts, kad rediģējat ziņas vai pievienojat jaunas.
Lai izmantotu ISR, lapas funkcijai getStaticProps pievienojiet revalidate prop.
export async function getStaticProps() {
const res = await fetch('https://.../data')
const data = await res.json()
return {
props: {
data,
},
revalidate: 60
}
}
Šeit Next.js mēģinās atjaunot lapu, kad pieprasījums tiks saņemts pēc 60 sekundēm. Nākamajā pieprasījumā tiks sniegta atbilde ar atjauninātu lapu.
Programmā Next.js 13 izmantojiet atkārtotu apstiprinājumu ielādei šādi:
fetch('https://.../data', { next: { revalidate: 60 } });
Varat iestatīt laika intervālu, kas vislabāk atbilst jūsu datiem.
Kā izvēlēties renderēšanas metodi
Līdz šim esat uzzinājis par četrām atveidošanas metodēm vietnē Next.js — CSR, SSR, SSG un ISG. Katra no šīm metodēm ir piemērota dažādām situācijām. CSR ir noderīga lapām, kurām nepieciešami jauni dati, kur nav jāuztraucas par spēcīgu SEO. SSR ir lieliski piemērots arī lapām, kurās tiek patērēti dinamiski dati, taču tas ir draudzīgāks SEO.
SSG ir piemērots lapām, kuru dati lielākoties ir statiski, savukārt ISG ir vislabākais lapām, kurās ir dati, kurus vēlaties atjaunināt periodiski. SSG un ISG ir lieliski veiktspējas un SEO ziņā, jo dati tiek iepriekš ielādēti un jūs varat tos saglabāt kešatmiņā.