譯者 | 布加迪

審校 | 孫淑娟

渲染是將React代碼轉(zhuǎn)換成HTML的過程。用戶選擇的渲染方法取決于所處理的數(shù)據(jù)以及用戶對性能的關(guān)注程度。

在Next.js中，渲染的用途非常廣泛。用戶可以用靜態(tài)或增量方式渲染客戶端或服務(wù)器端頁面。

看看這些方法是如何工作的以及每種方法有怎樣的表現(xiàn)。

服務(wù)器端渲染

就服務(wù)器端渲染（SSR）而言，當(dāng)用戶訪問網(wǎng)頁時(shí)，瀏覽器向服務(wù)器發(fā)送關(guān)于該頁面的請求。服務(wù)器從數(shù)據(jù)庫獲取必要的數(shù)據(jù)（如果需要的話），并將其與頁面內(nèi)容一同發(fā)送到瀏覽器。然后瀏覽器將其顯示給用戶。

瀏覽器對用戶點(diǎn)擊的每個(gè)鏈接發(fā)出此請求，這意味著服務(wù)器每次都處理請求。這可能會降低網(wǎng)站的性能。然而，服務(wù)器端渲染非常適合使用動態(tài)數(shù)據(jù)的頁面。

每當(dāng)用戶請求時(shí)，使用getServerSideProps重新構(gòu)建頁面。

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只在服務(wù)器上運(yùn)行，它是這樣運(yùn)行的：

• 當(dāng)用戶直接訪問頁面時(shí)，它在請求時(shí)運(yùn)行，頁面使用它返回的屬性來預(yù)渲染。
• 當(dāng)用戶通過Next鏈接訪問頁面時(shí)，瀏覽器向運(yùn)行它的服務(wù)器發(fā)送請求。

在新版本中，用戶可以選擇使用頁面或布局中的動態(tài)數(shù)據(jù)獲取來享用服務(wù)器端渲染。

動態(tài)數(shù)據(jù)獲取是fetch()請求，它通過將緩存選項(xiàng)設(shè)置為“no-store”來選擇退出緩存。

fetch (https://..。'， {cache: 'no-store'});

或者，將revalidate設(shè)置為0：

fetch (https://..。'， {next: {revalidate: 0}});

該功能目前處于測試階段，請記住這一點(diǎn)。可以在??Next.js 13 Beta文檔??中進(jìn)一步了解動態(tài)數(shù)據(jù)獲取。

客戶端渲染

當(dāng)用戶需要頻繁更新數(shù)據(jù)或不想預(yù)渲染頁面時(shí)，應(yīng)該使用客戶端渲染（CSR）。用戶可以在頁面層面或組件層面實(shí)現(xiàn)CSR。在頁面層面，Next.js在運(yùn)行時(shí)獲取數(shù)據(jù)；而在組件層面執(zhí)行操作時(shí)，它在頁面掛載時(shí)獲取數(shù)據(jù)。正因?yàn)槿绱耍珻SR可能導(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 <p>Loading...</p>
  if (!data) return <p>No data</p>
  return (
    <div>
      // Use data
    </div>
  )
}

還可以使用SWR鉤子。它緩存數(shù)據(jù)，一旦數(shù)據(jù)過時(shí)，就重新驗(yàn)證數(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) 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的區(qū)別在于，在SSR中，從服務(wù)器上的每個(gè)頁面請求獲取數(shù)據(jù)；而在CSR中，從客戶端獲取數(shù)據(jù)。

靜態(tài)站點(diǎn)生成

就靜態(tài)站點(diǎn)生成（SSG）而言，頁面在構(gòu)建期間只獲取一次數(shù)據(jù)。靜態(tài)生成頁面非常快，性能良好，因?yàn)樗许撁娑际孪葮?gòu)建。SSG因此非常適合使用靜態(tài)內(nèi)容（比如銷售頁面或博客）的頁面。

在Next.js中，用戶必須從想要靜態(tài)渲染的頁面中導(dǎo)出 getStaticProps函數(shù)。

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里面查詢數(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)渲染是默認(rèn)操作，內(nèi)容被獲取和緩存，除非用戶關(guān)閉了緩存選項(xiàng)。

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>
  );
}

可從文檔進(jìn)一步了解??Next.js 13中的靜態(tài)渲染??。

增量靜態(tài)生成

有時(shí)用戶想使用SSG，但又想定期更新內(nèi)容，這時(shí)候增量靜態(tài)生成（ISG）大有幫助。

ISG讓用戶可以在構(gòu)建靜態(tài)頁面后在指定的時(shí)間間隔后創(chuàng)建或更新靜態(tài)頁面。這樣一來，用戶不需要重建整個(gè)站點(diǎn)，只需重建需要它的頁面。

ISG保留了SSG的優(yōu)點(diǎn)，又增加了為用戶提供最新內(nèi)容的好處。ISG非常適合站點(diǎn)上那些使用不斷變化的數(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
  }
}

在這里，當(dāng)請求在60秒后到來時(shí)，Next.js將嘗試重新構(gòu)建頁面。下一個(gè)請求將產(chǎn)生帶有更新頁面的響應(yīng)。

在Next.js 13中，使用fetch中的revalidate，就像這樣：

fetch (https://..。/data'， {next: {revalidate: 60}});

用戶可以將時(shí)間間隔設(shè)置為最適合其數(shù)據(jù)的任何時(shí)間間隔。

如何選擇渲染方法？

到目前為止，用戶已了解了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方面來說都很出色，因?yàn)閿?shù)據(jù)預(yù)獲取，用戶還可以緩存數(shù)據(jù)。

原文標(biāo)題：??Understanding Next.js Rendering Methods: CSR, SSR, SSG, ISR??，作者：Mary Gathoni