伺服器端渲染 (SSR)

也稱為「SSR」或「動態渲染」。

如果頁面使用伺服器端渲染，則頁面 HTML 會在每次請求時產生。

要在頁面中使用伺服器端渲染，您需要export一個名為getServerSideProps的async函式。伺服器會在每次請求時呼叫此函式。

例如，假設您的頁面需要預渲染經常更新的資料（從外部 API 擷取）。您可以撰寫getServerSideProps來擷取此資料並將其傳遞給Page，如下所示

export default function Page({ data }) {
  // Render data...
}
 
// This gets called on every request
export async function getServerSideProps() {
  // Fetch data from external API
  const res = await fetch(`https://.../data`)
  const data = await res.json()
 
  // Pass data to the page via props
  return { props: { data } }
}

如您所見，getServerSideProps與getStaticProps類似，但不同之處在於getServerSideProps會在每次請求時執行，而不是在建置時執行。

要深入瞭解getServerSideProps的運作方式，請參閱我們的資料擷取文件。