仅在NextJS网站构建期间如何使用getInitialProps?

使用NextJS构建静态网站时,我希望该getInitialProps方法仅在构建步骤中触发,而不在客户端上触发。

在构建步骤中,NextJS 在使用每个组件的呈现HTML生成页面的静态HTML之前运行getInitialProps方法在客户端上,NextJS还在呈现页面组件之前运行此方法,以便为该组件返回必要的道具。因此,较大的请求可能会延迟客户端的第一次绘画,因为这是一个阻塞请求。

// example usage of API call in getInitialProps
import fetch from 'isomorphic-unfetch'

function Page({ stars }) {
  return <div>Next stars: {stars}</div>
}

Page.getInitialProps = async ({ req }) => {
  const res = await fetch('https://api.github.com/repos/zeit/next.js')
  const json = await res.json()
  return { stars: json.stargazers_count }
}

export default Page

我不愿意将慢速的API请求移至componentDidMount以避免阻塞请求,因为我想使用在构建步骤中返回的数据来填充静态HTML,并且此特定请求不需要动态或在更新后进行更新构建。

有没有一种方法可以让我构建getInitialProps运行不能在客户端加载页面时运行?next export

这是好习惯吗?

西里神奇2020/03/23 10:53:50

我发现了NextJs 9.0.3的解决方法(其他版本也可以使用,我没有测试过)

// XXXPage is your page

XXXPage.getInitialProps = async (req) => {
  if (process.browser) {
    return __NEXT_DATA__.props.pageProps;
  }
  // original logic
}