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中文網其他相關文章！
