跳至内容
构建您的应用程序数据获取getServerSideProps

getServerSideProps

getServerSideProps 是一个 Next.js 函数，可用于在请求时获取数据并渲染页面的内容。

示例

您可以通过从页面组件导出 getServerSideProps 来使用它。以下示例显示了如何在 getServerSideProps 中从第三方 API 获取数据，并将数据作为 props 传递到页面。

pages/index.tsx
import type { InferGetServerSidePropsType, GetServerSideProps } from 'next'
 
type Repo = {
  name: string
  stargazers_count: number
}
 
export const getServerSideProps = (async () => {
  // Fetch data from external API
  const res = await fetch('https://api.github.com/repos/vercel/next.js')
  const repo: Repo = await res.json()
  // Pass data to the page via props
  return { props: { repo } }
}) satisfies GetServerSideProps<{ repo: Repo }>
 
export default function Page({
  repo,
}: InferGetServerSidePropsType<typeof getServerSideProps>) {
  return (
    <main>
      <p>{repo.stargazers_count}</p>
    </main>
  )
}

何时应该使用 getServerSideProps？

如果需要渲染依赖于个性化用户数据或只能在请求时才知道的信息（例如，授权 标头或地理位置）的页面，则应使用 getServerSideProps。

如果您不需要在请求时获取数据，或者更希望缓存数据和预渲染的 HTML，我们建议使用 getStaticProps。

行为

  • getServerSideProps 在服务器上运行。
  • getServerSideProps 只能从页面导出。
  • getServerSideProps 返回 JSON。
  • 当用户访问页面时，getServerSideProps 将用于在请求时获取数据，并且该数据用于渲染页面的初始 HTML。
  • 传递给页面组件的props可以在客户端作为初始 HTML 的一部分查看。这是为了允许页面正确地水合。请确保您不会在props中传递任何不应在客户端可用的敏感信息。
  • 当用户通过 next/link 或 next/router 访问页面时，Next.js 会向服务器发送 API 请求，该请求会运行 getServerSideProps。
  • 在使用 getServerSideProps 时，您不必调用 Next.js API 路由 来获取数据，因为该函数在服务器上运行。相反，您可以直接从 getServerSideProps 内部调用 CMS、数据库或其他第三方 API。

需要了解

错误处理

如果在getServerSideProps内部抛出错误，它将显示pages/500.js文件。查看有关500 页面的文档，以了解如何创建它。在开发过程中，不会使用此文件，而是显示开发错误覆盖层。

特殊情况

服务器端渲染 (SSR) 的缓存

您可以在getServerSideProps内部使用缓存头 (Cache-Control) 来缓存动态响应。例如，使用stale-while-revalidate。

// This value is considered fresh for ten seconds (s-maxage=10).
// If a request is repeated within the next 10 seconds, the previously
// cached value will still be fresh. If the request is repeated before 59 seconds,
// the cached value will be stale but still render (stale-while-revalidate=59).
//
// In the background, a revalidation request will be made to populate the cache
// with a fresh value. If you refresh the page, you will see the new value.
export async function getServerSideProps({ req, res }) {
  res.setHeader(
    'Cache-Control',
    'public, s-maxage=10, stale-while-revalidate=59'
  )
 
  return {
    props: {},
  }
}

但是，在使用cache-control之前，我们建议您查看是否使用带有ISR的getStaticProps更适合您的用例。