使用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
这是好习惯吗?
我发现了NextJs 9.0.3的解决方法(其他版本也可以使用,我没有测试过)