getInitialProps

须知：getInitialProps 是一个旧版 API。我们建议使用 getStaticProps 或 getServerSideProps 来代替。

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

pages/index.tsx

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 也将在服务器上运行。

Context 对象

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

名称	描述
`pathname`	当前路由，`/pages` 中页面的路径
`query`	URL 的查询字符串，解析为对象
`asPath`	浏览器中显示的实际路径的 `String`（包括查询）
`req`	HTTP 请求对象（仅限服务器）
`res`	HTTP 响应对象（仅限服务器）
`err`	如果在渲染期间遇到任何错误，则为错误对象

注意事项

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