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

Question

请考虑我的情况：在Next.js中，我构建了一个组件，该组件旨在成为一个自行获取数据的子组件（没有任何父组件），现在我发现这是作者不允许的next.js。然而，他们提到async-reactor图书馆作为一种解决方法：

也许你可以尝试像 async-reactor 这样的东西

但我尝试使用async-reactor，但仍然无法在 Next.js 中的嵌套子组件内渲染 fetch。这是我尝试过的：

// 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请求，但要知道它的优点/缺点。

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

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

一个缺点是此部分不会传递到下一个 SSR 机制，因此不会轻松进行 SEO。