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

Question

请考虑我的情况:在Next.js ，我已经构建了一个组件，该组件旨在成为自己获取数据的子组件(没有任何父组件)，现在我有 come to find this is not allowed由 next.js 的作者编写。然而，他们提到了 async-reactor库作为解决方法:

May be you can try something like 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 写道:

We don't have plans to add support for calling getInitialProps in nested components.

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

这个ajax请求会在 componentDidMount里面实现/ useEffect Hook 是 不叫 在服务器端。

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

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