Home-theater-designers
Rendering är processen att konvertera React-kod till HTML. Vilken renderingsmetod du väljer beror på vilken data du arbetar med och hur mycket du bryr dig om prestanda.
I Next.js är renderingen väldigt mångsidig. Du kan rendera sidor på klientsidan eller serversidan, statiskt eller inkrementellt.
Ta en titt på hur dessa metoder fungerar och hur de fungerar.
MAKEUSE AV DAGENS VIDEO
Rendering på serversidan
Med server-side rendering (SSR), när en användare besöker en webbsida, skickar webbläsaren en begäran till servern för den sidan. Servern hämtar vid behov nödvändig data från databasen och skickar den tillsammans med sidans innehåll till webbläsaren. Webbläsaren visar det sedan för användaren.
Webbläsaren gör denna begäran för varje länk som användaren klickar på vilket innebär att servern bearbetar begäran varje gång.
hur man använder gif som tapet
Detta kan minska webbplatsens prestanda. Men rendering på serversidan är perfekt för sidor som konsumerar dynamisk data.
Använd getServerSideProps för att bygga om sidan varje gång en användare begär det.
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 körs bara på servern och det är så här:
- När en användare kommer åt sidan direkt, körs den vid begäran och sidan är förrenderad med de rekvisita som den returnerar.
- När en användare kommer åt sidan via en Nästa länk, skickar webbläsaren en begäran till servern som kör den.
I den nya versionen kan du välja rendering på serversidan med hjälp av dynamiska datahämtningar på en sida eller en layout.
Dynamiska datahämtningar är fetch()-förfrågningar som specifikt väljer bort cachelagring genom att ställa in cachealternativet till 'no-store'.
fetch('https://...', { cache: 'no-store' });
Alternativt ställ in revalidate till 0:
fetch('https://...', { next: { revalidate: 0 } });
Den här funktionen är för närvarande i beta så kom ihåg det. Du kan läsa mer om dynamiska datahämtningar i Next.js 13 betadokument .
Rendering på klientsidan
Du bör använda rendering på klientsidan (CSR) när du behöver uppdatera data ofta eller när du inte vill förrendera din sida. Du kan implementera CSR på sidnivå eller komponentnivå. På sidnivå hämtar Next.js data vid körning och när det är gjort på komponentnivå hämtar det data vid montering. På grund av detta kan CSR bidra till långsam prestanda.
Använd useEffect() krok för att rendera sidor på klienten så här:
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>
)
}
Du kan också använda SWR-kroken. Den cachar data och omvaliderar den om den blir inaktuell.
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>
)
}
I Next.js 13 måste du använda en klientkomponent genom att lägga till 'använd klient'-direktivet överst i filen.
"use client";
export default () => {
return (
<div>
// Client component
</div>
);
};
Skillnaden mellan SSR och CSR är att data hämtas på varje sidförfrågan på servern i SSR medan data hämtas på klientsidan i CSR.
Generering av statisk webbplats
Med static-site generation (SSG), sidan hämtar data en gång under byggtiden. Statiskt genererade sidor är mycket snabba och presterar bra eftersom alla sidor är byggda i förväg. SSG är därför perfekt för sidor som använder statiskt innehåll som försäljningssidor eller bloggar.
I Next.js måste du exportera funktionen getStaticProps på sidan du vill rendera statiskt.
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 } }
}
Du kan också fråga databasen inuti getStaticProps.
export async function getStaticProps() {
// Call function to fetch data from database
const data = await getDataFromDB()
return { props: { data } }
}
I Next.js 13 är statisk rendering standard, och innehåll hämtas och cachelagras om du inte ställer in cachningsalternativet till av.
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>
);
}
Lära sig mer om statisk rendering i Next.js 13 från dokumenten.
Inkrementell-statisk generation
Det finns tillfällen då du vill använda SSG men också vill uppdatera innehållet regelbundet. Det är här inkrementell statisk generering (ISG) hjälper.
ISG låter dig skapa eller uppdatera statiska sidor efter att du har byggt dem efter det tidsintervall du anger. På så sätt behöver du inte bygga om hela webbplatsen bara de sidor som behöver det.
ISG behåller fördelarna med SSG med den extra fördelen att tillhandahålla uppdaterat innehåll till användarna. ISG är perfekt för de sidor på din webbplats som konsumerar växlande data. Du kan till exempel använd ISR för att rendera blogginlägg så att bloggen håller sig uppdaterad när du redigerar inlägg eller lägger till nya.
För att använda ISR, lägg till revalidate prop till getStaticProps-funktionen på en sida.
export async function getStaticProps() {
const res = await fetch('https://.../data')
const data = await res.json()
return {
props: {
data,
},
revalidate: 60
}
}
Här kommer Next.js att försöka bygga om sidan när en förfrågan kommer in efter 60 sekunder. Nästa begäran kommer att resultera i ett svar med den uppdaterade sidan.
I Next.js 13, använd revalidate i hämtning så här:
fetch('https://.../data', { next: { revalidate: 60 } });
Du kan ställa in tidsintervallet till det som fungerar bäst med dina data.
Hur man väljer en renderingsmetod
Hittills har du lärt dig om de fyra renderingsmetoderna i Next.js — CSR, SSR, SSG och ISG. Var och en av dessa metoder är lämpliga för olika situationer. CSR är användbart för sidor som behöver färsk data, där stark SEO inte är ett problem. SSR är också bra för sidor som konsumerar dynamisk data, men det är mer SEO-vänligt.
SSG är lämpligt för sidor vars data är mestadels statisk medan ISG är bäst för sidor som innehåller data som du vill uppdatera i intervaller. SSG och ISG är bra när det gäller prestanda och SEO eftersom data är förhämtade och du kan cachelagra den.