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

JavaScript React.js

小卤蛋

2020-03-23

使用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

这是好习惯吗？

第2696篇《仅在NextJS网站构建期间如何使用getInitialProps？》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共1个回答
西里神奇 2020.03.23

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

// XXXPage is your page

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

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android