建站
咨詢
售后
建站咨詢
新聞中心
譯者 | 布加迪
審校 | 孫淑娟
渲染是將React代碼轉(zhuǎn)換成HTML的過程。用戶選擇的渲染方法取決于所處理的數(shù)據(jù)以及用戶對性能的關(guān)注程度。
在Next.js中，渲染的用途非常廣泛。用戶可以用靜態(tài)或增量方式渲染客戶端或服務(wù)器端頁面。
看看這些方法是如何工作的以及每種方法有怎樣的表現(xiàn)。
服務(wù)器端渲染
就服務(wù)器端渲染（SSR）而言，當用戶訪問網(wǎng)頁時，瀏覽器向服務(wù)器發(fā)送關(guān)于該頁面的請求。服務(wù)器從數(shù)據(jù)庫獲取必要的數(shù)據(jù)（如果需要的話），并將其與頁面內(nèi)容一同發(fā)送到瀏覽器。然后瀏覽器將其顯示給用戶。
瀏覽器對用戶點擊的每個鏈接發(fā)出此請求，這意味著服務(wù)器每次都處理請求。這可能會降低網(wǎng)站的性能。然而，服務(wù)器端渲染非常適合使用動態(tài)數(shù)據(jù)的頁面。
每當用戶請求時，使用getServerSideProps重新構(gòu)建頁面。
export default function Home({ data }) {
return (
// Use data
);
}
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只在服務(wù)器上運行，它是這樣運行的：
- 當用戶直接訪問頁面時，它在請求時運行，頁面使用它返回的屬性來預(yù)渲染。
- 當用戶通過Next鏈接訪問頁面時，瀏覽器向運行它的服務(wù)器發(fā)送請求。
在新版本中，用戶可以選擇使用頁面或布局中的動態(tài)數(shù)據(jù)獲取來享用服務(wù)器端渲染。
動態(tài)數(shù)據(jù)獲取是fetch()請求，它通過將緩存選項設(shè)置為“no-store”來選擇退出緩存。
fetch (https://..。'， {cache: 'no-store'});或者，將revalidate設(shè)置為0：
fetch (https://..。'， {next: {revalidate: 0}});該功能目前處于測試階段，請記住這一點。可以在??Next.js 13 Beta文檔??中進一步了解動態(tài)數(shù)據(jù)獲取。
客戶端渲染
當用戶需要頻繁更新數(shù)據(jù)或不想預(yù)渲染頁面時，應(yīng)該使用客戶端渲染（CSR）。用戶可以在頁面層面或組件層面實現(xiàn)CSR。在頁面層面，Next.js在運行時獲取數(shù)據(jù)；而在組件層面執(zhí)行操作時，它在頁面掛載時獲取數(shù)據(jù)。正因為如此，CSR可能導(dǎo)致性能變慢。
使用useEffect()鉤子在客戶端渲染頁面，如下所示：
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 Loading...
if (!data) return No data
return (
// Use data
)
}還可以使用SWR鉤子。它緩存數(shù)據(jù)，一旦數(shù)據(jù)過時，就重新驗證數(shù)據(jù)。
import useSWR from 'swr'
const fetcher = (...args) => fetch(...args).then((res) => res.json())
function Home() {
const { data, error } = useSWR('/api/data', fetcher)
if (error) returnFailed to load
if (!data) returnLoading...
return (
// Use data
)
}
在Next.js 13中，用戶需要使用客戶端組件，為此在文件頂部添加“use client”指令。
"use client";
export default () => {
return (
// Client component
);
};
SSR和CSR的區(qū)別在于，在SSR中，從服務(wù)器上的每個頁面請求獲取數(shù)據(jù)；而在CSR中，從客戶端獲取數(shù)據(jù)。
靜態(tài)站點生成
就靜態(tài)站點生成（SSG）而言，頁面在構(gòu)建期間只獲取一次數(shù)據(jù)。靜態(tài)生成頁面非?？欤阅芰己?，因為所有頁面都事先構(gòu)建。SSG因此非常適合使用靜態(tài)內(nèi)容（比如銷售頁面或博客）的頁面。
在Next.js中，用戶必須從想要靜態(tài)渲染的頁面中導(dǎo)出 getStaticProps函數(shù)。
export default function Home({ data }) {
return (
// Use data
);
}
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 } }
}用戶還可以在getStaticProps里面查詢數(shù)據(jù)庫。
export async function getStaticProps() {
// Call function to fetch data from database
const data = await getDataFromDB()
return { props: { data } }
}在Next.js 13中，靜態(tài)渲染是默認操作，內(nèi)容被獲取和緩存，除非用戶關(guān)閉了緩存選項。
async function getData() {
const res = await fetch('https://.../data');
return res.json();
}
export default async function Home() {
const data = await getData();
return (
// Use data
);
}可從文檔進一步了解??Next.js 13中的靜態(tài)渲染??。
增量靜態(tài)生成
有時用戶想使用SSG，但又想定期更新內(nèi)容，這時候增量靜態(tài)生成（ISG）大有幫助。
ISG讓用戶可以在構(gòu)建靜態(tài)頁面后在指定的時間間隔后創(chuàng)建或更新靜態(tài)頁面。這樣一來，用戶不需要重建整個站點，只需重建需要它的頁面。
ISG保留了SSG的優(yōu)點，又增加了為用戶提供最新內(nèi)容的好處。ISG非常適合站點上那些使用不斷變化的數(shù)據(jù)的頁面。比如說，用戶可以使用ISR渲染博文，以便在編輯文章或添加新文章后博客保持更新。
若要使用ISR，將revalidate屬性添加到頁面上的getStaticProps函數(shù)中。
export async function getStaticProps() {
const res = await fetch('https://.../data')
const data = await res.json()
return {
props: {
data,
},
revalidate: 60
}
}在這里，當請求在60秒后到來時，Next.js將嘗試重新構(gòu)建頁面。下一個請求將產(chǎn)生帶有更新頁面的響應(yīng)。
在Next.js 13中，使用fetch中的revalidate，就像這樣：
fetch (https://..。/data'， {next: {revalidate: 60}});用戶可以將時間間隔設(shè)置為最適合其數(shù)據(jù)的任何時間間隔。
如何選擇渲染方法？
到目前為止，用戶已了解了Next.js中的四種渲染方法：CSR、SSR、SSG和ISG。每種方法都適用于不同的情況。CSR適用于需要新數(shù)據(jù)的頁面。SSR適用于使用動態(tài)數(shù)據(jù)的頁面，但它對SEO較為友好。
SSG適合數(shù)據(jù)基本上靜態(tài)的頁面，而ISG最適合含有用戶想要間隔更新的數(shù)據(jù)的頁面。SSG和ISG從性能和SEO方面來說都很出色，因為數(shù)據(jù)預(yù)獲取，用戶還可以緩存數(shù)據(jù)。
原文標題：??Understanding Next.js Rendering Methods: CSR, SSR, SSG, ISR??，作者：Mary Gathoni
網(wǎng)站標題：一文看懂Next.js渲染方法：CSR、SSR、SSG和ISR
網(wǎng)頁URL：http://www.dlmjj.cn/article/cdepihe.html
