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