Sponsor
ntab.devntab.dev 提升效率的新标签页组件
点击查看
Menu

getInitialProps

值得注意的是getInitialProps 是一个旧版 API。我们建议改用 getStaticPropsgetServerSideProps

getInitialProps 是一个可以添加到页面默认导出的 React 组件的 async 函数。它将在服务器端运行,并在页面切换期间再次在客户端运行。函数的结果将作为 props 传递给 React 组件。

pages/index.tsx
TypeScript
import { NextPageContext } from 'next'
 
Page.getInitialProps = async (ctx: NextPageContext) => {
  const res = await fetch('https://api.github.com/repos/vercel/next.js')
  const json = await res.json()
  return { stars: json.stargazers_count }
}
 
export default function Page({ stars }: { stars: number }) {
  return stars
}

值得注意的是

  • getInitialProps 返回的数据在服务器渲染时会被序列化。确保从 getInitialProps 返回的对象是一个普通的 Object,不要使用 DateMapSet
  • 对于初始页面加载,getInitialProps 只会在服务器上运行。当使用 next/link 组件或 next/router 导航到不同路由时,getInitialProps 将再次在客户端运行。
  • 如果在自定义的 _app.js 中使用 getInitialProps,并且被导航的页面正在使用 getServerSideProps,那么 getInitialProps 也会在服务器上运行。

上下文对象

getInitialProps 接收一个名为 context 的单一参数,它是一个具有以下属性的对象:

名称描述
pathname当前路由,页面在 /pages 中的路径
queryURL 的查询字符串,解析为对象
asPath浏览器中显示的实际路径(包括查询)的 String
reqHTTP 请求对象(仅服务器端)
resHTTP 响应对象(仅服务器端)
err渲染过程中遇到任何错误时的错误对象

注意事项

  • getInitialProps 只能在 pages/ 顶层文件中使用,不能在嵌套组件中使用。要在组件级别进行嵌套数据获取,请考虑探索 App Router
  • 无论路由是静态还是动态,从 getInitialProps 返回的任何数据作为 props 都可以在初始 HTML 的客户端上检查。这是为了正确地水合页面。确保不要在 props 中传递不应在客户端上可用的敏感信息。