introduction

推荐使用getStaticProps / getServerSideProps代替它,这些数据抓取方法允许你有一个更细腻的选择(在静态生成 / 服务端渲染之间) ..

getInitialProps为页面启用了服务端渲染并且允许你执行初始化数据填充,这意味着发送这个页面已经在服务器端进行了数据填充,这有助于SEO.

getInitialProps将禁用自动静态优化 ..

getInitialProps是一个异步函数能够增加到任何页面并作为一个静态方法,查看以下例子

function Page({ stars }) {
  return <div>Next stars: {stars}</div>
}
Page.getInitialProps = async (ctx) => {
  const res = await fetch('https://api.github.com/repos/vercel/next.js')
  const json = await res.json()
  return { stars: json.stargazers_count }
}
export default Page

或者类组件

import React from 'react'
class Page extends React.Component {
  static async getInitialProps(ctx) {
    const res = await fetch('https://api.github.com/repos/vercel/next.js')
    const json = await res.json()
    return { stars: json.stargazers_count }
  }
  render() {
    return <div>Next stars: {this.props.stars}</div>
  }
}
export default Page

getInitialProps被用来异步的抓取某些数据,然后用于填充属性 ..props

从getInitialProps中返回的数据是可序列化的(当进行服务器渲染的时候),类似于 JSON.stringify所作的那样,确保从getInitialProps中返回的是一个简单对象并且不要使用Date,Map,Set…

对于初始化页面的加载,getInitialProps将仅仅运行在服务器 ..

当通过next/link组件进行客户端导航到不同的路由时或者使用next/router时会运行在客户端 …,然而getInitialProps使用在自定义的_app.js中,并且即将被导航的页面是实现了getServerSideProps的话,那么这个getInitialProps将会运行在服务端 …

上下文对象

getInitialProps接收叫做context的单个参数,但是它包含了以下属性

pathname 当前路由,标识在/pages下的页面的路径
queryURL的查询字符串部分解析为一个对象
asPath实际路径的字符串(包括query) - 本质上就是展示在浏览器上的路径
reqHTTP request object (server only)
resHTTP response object (server only)
err如果在渲染阶段发生错误(的错误对象）

Caveats

getInitialProps不能够使用在子组件中,仅仅使用在每一个页面的默认导出中 …
如果使用在getInitialProps中使用仅服务端模块内容,确保正确的导入它们,否则它们减缓你的app性能 ..
注意到无关那种渲染类型,任何props将会传递到页面组件并且它们能够客户端的初始化HTML 中可见 …这允许页面能够正确的水和,确保你没有传递任何敏感信息(不应该在出现在客户端的页面中的props)

TypeScript

也就是具有类型约束

import { NextPage } from 'next'
interface Props {
  userAgent?: string;
}
const Page: NextPage<Props> = ({ userAgent }) => (
  <main>Your user agent: {userAgent}</main>
)
Page.getInitialProps = async ({ req }) => {
  const userAgent = req ? req.headers['user-agent'] : navigator.userAgent
  return { userAgent }
}
export default Page

同样对于React.Component你能够使用 NextPageContext

import React from 'react'
import { NextPageContext } from 'next'
interface Props {
  userAgent?: string;
}
export default class Page extends React.Component<Props> {
  static async getInitialProps({ req }: NextPageContext) {
    const userAgent = req ? req.headers['user-agent'] : navigator.userAgent
    return { userAgent }
  }
  render() {
    const { userAgent } = this.props
    return <main>Your user agent: {userAgent}</main>
  }
}