何時在 Next.js 中使用 SSR 和 SSG

SSR（伺服器端渲染）：

在每次向伺服器發出請求時運行。
每次使用者造訪頁面時，伺服器都會取得數據，呈現 HTML，然後將其傳送到客戶端。
這確保了內容始終是新鮮的，但由於伺服器端處理的開銷，它可能會變慢。

SSR 時間軸範例：

請求1：用戶A訪問→伺服器取得數據，動態生成頁面，並回應。

請求2：用戶B訪問→伺服器再次取數據，動態生成頁面，並回應。

export async function getServerSideProps(context) {
  const res = await fetch(`https://api.example.com/data`)
  const data = await res.json()

  return {
    props: { data }, // Will be passed to the page component as props
  }
}

function Page({ data }) {
  return <div>{data. Content}</div>
}
export default Page;

SSG（靜態站點產生）：

在建置時運行（當您執行下一個建置時）。
HTML 和資料被預先渲染並儲存為靜態檔案。這些文件直接提供給用戶，速度超級快。

可選：如果您使用 revalidate，Next.js 將在指定的時間間隔後在背景重建頁面，確保更新的內容可用。
具有重新驗證功能的 SSG 時間軸範例：60：

建置時間：頁面使用建置時可用的資料進行預先渲染。

請求 1：（建置後）：使用者 A 存取 → 提供靜態 HTML。

後台重新產生（60 秒後）：Next.js 取得新資料並重新產生頁面。

請求 2：（重新產生後）：使用者 B 存取 → 提供更新的靜態 HTML。

export async function getStaticProps() {
  const res = await fetch('https://api.example.com/posts')
  const posts = await res.json()

  return {
    props: { 
      posts 
    },
    // Optional: Regenerate the page at most once every 60 seconds
    revalidate: 60 
  }
}

function BlogPage({ posts }) {
  return (
    <div>
      {posts. Map(post => (
        <div key={post.id}>{post.title}</div>
      ))}
    </div>
  )
}

SSR： 取得新資料並根據每個請求產生頁面。

SSG： 在建置時（或在計劃的重新驗證間隔期間）預先渲染頁面一次，並向所有使用者提供相同的預先建置頁面，直到重新產生。

在下列情況下使用 SSR：

您需要即時、最新的內容（例如儀表板、使用者特定資料）。
內容頻繁變化，無法有效快取。

在下列情況下使用 SSG：

內容不常改變（例如部落格文章、行銷頁面）。
速度和性能至關重要。

以上是何時在 Next.js 中使用 SSR 和 SSG的詳細內容。更多資訊請關注PHP中文網其他相關文章！