getInitialProps
值得注意的是:
getInitialProps
是一个旧版 API。我们建议改用getStaticProps
或getServerSideProps
。
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
,不要使用Date
、Map
或Set
。- 对于初始页面加载,
getInitialProps
只会在服务器上运行。当使用next/link
组件或next/router
导航到不同路由时,getInitialProps
将再次在客户端运行。- 如果在自定义的
_app.js
中使用getInitialProps
,并且被导航的页面正在使用getServerSideProps
,那么getInitialProps
也会在服务器上运行。
上下文对象
getInitialProps
接收一个名为 context
的单一参数,它是一个具有以下属性的对象:
名称 | 描述 |
---|---|
pathname | 当前路由,页面在 /pages 中的路径 |
query | URL 的查询字符串,解析为对象 |
asPath | 浏览器中显示的实际路径(包括查询)的 String |
req | HTTP 请求对象(仅服务器端) |
res | HTTP 响应对象(仅服务器端) |
err | 渲染过程中遇到任何错误时的错误对象 |
注意事项
getInitialProps
只能在pages/
顶层文件中使用,不能在嵌套组件中使用。要在组件级别进行嵌套数据获取,请考虑探索 App Router。- 无论路由是静态还是动态,从
getInitialProps
返回的任何数据作为props
都可以在初始 HTML 的客户端上检查。这是为了正确地水合页面。确保不要在props
中传递不应在客户端上可用的敏感信息。