服务端渲染 (SSR) | Next.js

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

如果页面使用了服务端渲染 (SSR)，则会在每次请求时生成页面 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 的工作原理，请参阅我们的数据获取文档。