Next.js 在嵌套子组件中获取数据

Question

请考虑我的情况：在Next.js中，我构建了一个组件，该组件旨在成为一个子组件，它自己获取数据（没有任何父组件），现在我发现这是作者不允许的下一个.js。但是，他们提到该async-reactor库是一种解决方法：也许你可以尝试像 async-reactor 这样的东西但是我尝试使用async-reactor并且仍然无法在 Next.js 的嵌套子组件中呈现提取。这是我尝试过的：// my child component import React from 'react';import {asyncReactor} from 'async-reactor';import fetch from 'isomorphic-unfetch';function Loader() {  return (<div>    <h2>Loading ...</h2></div>  );}async function AsyncPosts() {  const data = await fetch('https://jsonplaceholder.typicode.com/posts');  const posts = await data.json();  return (<div>    <ul>      {posts.map((x) => <li key={x.id}>{x.title}</li>)}    </ul></div>  );}export default asyncReactor(AsyncPosts, Loader);我希望这可以工作，但除了“Div”一词（甚至不应该呈现“Div”）之外，它不会呈现任何内容。有没有办法在 Next.js 的子组件中获取？到目前为止，我没有尝试过任何工作，但我发现很难相信这真的是不可能的。

Answer 1

正如@Arunoda 写道：

我们没有计划在嵌套组件中添加对调用getInitialProps的支持。

重点是getInitialProps，您可以在任何组件内发出 ajax 请求，但要知道它的优点/缺点。

这个 ajax 请求将在componentDidMount/ useEffecthook内部实现，而不是在服务器端调用。

好处之一是延迟加载数据，您不需要预先加载整个页面的数据，这意味着更少的数据 => 更小的网络请求。

一个缺点可能是这部分不会传递给 next 的 SSR 机制，因此不容易被 SEO。