如何在将应用加载到next.js中之前从api获取初始数据

Question

我想在呈现应用程序之前从api加载一些数据。

是的，我知道我们可以在组件的getInitialProps方法中做到这一点，但我不想在每次加载组件时都将其加载， 我只需要进行1次api调用，并在所有组件之间进行可访问的检索数据。最简单的方法是什么？

Answer 1

  

是的，我知道我们可以在组件的getInitialProps方法中完成

我认为这可能是您困惑的来源。 getInitialProps方法适用于 page 加载。不适用于单个 component 负载。

  

我只需要进行1次api调用，并在所有组件之间进行可访问的检索数据。

有两种方法可以做到这一点。

如果您想利用SSR

使用getInitalProps 进行页面加载和then pass the props down into sub components as you would in normal react application。

如果您只想坚持使用React

制作一个更高级别的组件，其中包含需要api数据的所有子组件。使用ComponentDidMount方法调用api，也可以使用React Hooks。像在普通的React应用程序中一样，从高层组件再次通过props传递数据。

无论哪种方式，您都可以限制进行api调用的次数。这样，您就不会在每次DOM重新渲染每个组件时都达到目标。

Next.js Learn和React Docs都很出色-我一直在那儿！