服务端渲染 (Server-side Rendering)

也被称为 "SSR" 或 "动态渲染 (Dynamic Rendering)"。

如果一个页面使用了服务端渲染 (Server-side Rendering)，那么该页面的 HTML 会在每次请求时重新生成。

要为页面启用服务端渲染，你需要 export 一个名为 getServerSideProps 的 async 函数。服务器会在每次请求时调用这个函数。

例如，假设你的页面需要预渲染频繁更新的数据（从外部 API 获取）。你可以编写如下所示的 getServerSideProps 函数来获取数据并传递给 Page 组件：

export default function Page({ data }) {
  // 渲染数据...
}

// 这个函数会在每次请求时被调用
export async function getServerSideProps() {
  // 从外部 API 获取数据
  const res = await fetch(`https://.../data`)
  const data = await res.json()

  // 通过 props 将数据传递给页面
  return { props: { data } }
}

如你所见，getServerSideProps 与 getStaticProps 类似，区别在于 getServerSideProps 会在每次请求时运行，而不是在构建时运行。

要了解更多关于 getServerSideProps 的工作原理，请查阅我们的数据获取文档。