introduction

需要注意的是,至少Next.js 9.3 才支持 ..

当使用这样的函数时,next.js 将在每次请求时预渲染页面(通过getServerSideProps返回的数据),这是有用的(如果你想要抓取经常改变的数据,并且让页面更新展示最新的数据 ..

export async function getServerSideProps(context) {
  return {
    props: {}, // will be passed to the page component as props
  }
}

你能够在顶级范围内导入模块(并使用在getServerSideProps),使用的导入不会打包在客户端中,这意味着你能够在getServerSideProps中编写服务端代码,包括从数据库中抓取数据 …

上下文参数

这个上下文参数是一个对象,包含了以下的key

• params如果页面是一个动态路由,params包含了路由参数,如果页面是[id].js,那么params将看起来像{id: ...}
• req 进入消息的Http 对象,具有额外的cookies属性,它是一个对象(字符串key,对应了字符串value cookie信息)
• res TheHTTPresponse object.
• <font style="color:rgb(17, 17, 17);">query</font>代表着查询字符串的对象,包括动态路由参数
• <font style="color:rgb(17, 17, 17);">preview</font>木兰模式,如果页面是预览模式,否则<font style="color:rgb(17, 17, 17);">false</font>
• <font style="color:rgb(17, 17, 17);">previewData</font> 由<font style="color:rgb(17, 17, 17);">setPreviewData</font>设置的预览数据集合
• <font style="color:rgb(17, 17, 17);">resolvedUrl</font>: 请求<font style="color:rgb(17, 17, 17);">URL</font>的格式化版本(去除了<font style="color:rgb(17, 17, 17);">_next/data</font>前缀j),对于客户端过渡并且包括了原始的查询值 ..
• <font style="color:rgb(17, 17, 17);">locale</font>包含了当前激活的<font style="color:rgb(17, 17, 17);">locale</font>(如果启用)
• <font style="color:rgb(17, 17, 17);">locales</font> 包含了所有支持的locales(如果启用) ..
• <font style="color:rgb(17, 17, 17);">defaultLocale</font> 包含了配置的默认locale(如果启用) …

getServerSideProps 返回值

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

• props

它是一个key-value 对,能够被页面的组件进行接收,并且应该是一个可序列化对象,因此任何属性能够传递且能够通过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

这个重定向对象允许重定向到内部以及外部的资源 … 它应该匹配这个类型 {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
  }
}

TypeScript

对于TypeScript,你能够使用来自next的GetServerSideProps类型

import { GetServerSideProps } from 'next'
export const getServerSideProps: GetServerSideProps = async (context) => {
  // ...
}

如果你想要为你的属性推断类型,使用InferGetServerSidePropsType

import { InferGetServerSidePropsType } from 'next'
type Data = { ... }
export const getServerSideProps = async () => {
  const res = await fetch('https://.../data')
  const data: Data = await res.json()
  return {
    props: {
      data,
    },
  }
}
function Page({ data }: InferGetServerSidePropsType<typeof getServerSideProps>) {
  // will resolve posts to type Data
}
export default Page

这样就能够自动推断数据类型 ..