getServerSideProps

当从页面导出名为 getServerSideProps（服务器端渲染）的函数时，Next.js 将在每次请求时使用 getServerSideProps 返回的数据预渲染此页面。如果您想获取经常更改的数据，并使页面更新以显示最新数据，这将很有用。

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 中直接编写服务器端代码**，包括从您的数据库中获取数据。

上下文参数

context 参数是一个包含以下键的对象

名称	描述
`params`	如果此页面使用动态路由，则 `params` 包含路由参数。如果页面名称为 `[id].js`，则 `params` 将类似于 `{ id: ... }`。
`req`	`HTTP` IncomingMessage 对象，带有一个额外的 `cookies` 属性，它是一个对象，其中字符串键映射到 cookie 的字符串值。
`res`	`HTTP` 响应对象.
`query`	表示查询字符串的对象，包括动态路由参数。
`preview`	（已弃用，请使用 `draftMode`）如果页面处于预览模式，则 `preview` 为 `true`，否则为 `false`。
`previewData`	（已弃用，请使用 `draftMode`）由 `setPreviewData` 设置的预览数据。
`草稿模式`	如果页面处于草稿模式，则 `draftMode` 为 `true`，否则为 `false`。
`resolvedUrl`	请求 `URL` 的规范化版本，它会去除客户端转换的 `_next/data` 前缀，并包含原始查询值。
`locale`	包含活动区域设置（如果已启用）。
`locales`	包含所有支持的区域设置（如果已启用）。
`defaultLocale`	包含配置的默认区域设置（如果已启用）。

getServerSideProps 返回值

getServerSideProps 函数应返回一个具有以下任意一个属性的对象

`props`

props 对象是一个键值对，其中每个值都由页面组件接收。它应该是一个可序列化对象，以便任何传递的 props 都可以使用JSON.stringify 进行序列化。

export async function getServerSideProps(context) {
  return {
    props: { message: `Next.js is awesome` }, // will be passed to the page component as props
  }
}

`notFound`

notFound 布尔值允许页面返回 404 状态和404 页面。使用 notFound: true，即使之前成功生成了页面，页面也会返回 404。这旨在支持诸如用户生成的内容被其作者删除之类的用例。

export async function getServerSideProps(context) {
  const res = await fetch(`https://.../data`)
  const data = await res.json()
 
  if (!data) {
    return {
      notFound: true,
    }
  }
 
  return {
    props: { data }, // will be passed to the page component as props
  }
}

`redirect`

redirect 对象允许重定向到内部和外部资源。它应该与 { destination: string, permanent: boolean } 的结构匹配。在某些罕见情况下，您可能需要为旧的 HTTP 客户端分配自定义状态代码以正确重定向。在这些情况下，您可以使用 statusCode 属性代替 permanent 属性，但不能同时使用两者。

export async function getServerSideProps(context) {
  const res = await fetch(`https://.../data`)
  const data = await res.json()
 
  if (!data) {
    return {
      redirect: {
        destination: '/',
        permanent: false,
      },
    }
  }
 
  return {
    props: {}, // will be passed to the page component as props
  }
}

版本历史

版本	更改
`v13.4.0`	App 路由器现在已稳定，并简化了数据获取
`v10.0.0`	添加了 `locale`、`locales`、`defaultLocale` 和 `notFound` 选项。
`v9.3.0`	引入了 `getServerSideProps`。