Not able to fetch data from Client Component (infinite fetch() calls)

[AlexLup06]

Edit by @acdlite: This is mostly a React issue. We're working to address it: #42180 (comment)

---

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 21.6.0: Mon Aug 22 20:19:52 PDT 2022; root:xnu-8020.140.49~2/RELEASE_ARM64_T6000
Binaries:
  Node: 16.14.2
  npm: 8.5.0
  Yarn: 1.22.18
  pnpm: N/A
Relevant packages:
  next: 13.0.0
  eslint-config-next: 13.0.0
  react: 18.2.0
  react-dom: 18.2.0

What browser are you using? (if relevant)

Version 106.0.5249.119

How are you deploying your application? (if relevant)

next dev

Describe the Bug

I was just playing around getting to know next 13 when I tried fetching data from a Client component.
I literally just copy pasted the example from the docs: https://beta.nextjs.org/docs/data-fetching/fetching#example-fetch-and-asyncawait-in-server-components
The Client Component is used inside page.tsx where its wrapped in
<Suspense fallback={<div>Loading...</div>}></Suspense>

When running that I get:

• Error: Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead.
• TypeError: Cannot read properties of null (reading 'use')

Server Component:

import { Suspense } from "react";
import Fact from "./fact";

export default function Home() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <Fact />
      </Suspense>
    </div>
  )
}

Client Component:

"use client";

import { use } from 'react';

async function getData() {
    console.log("fetch")
    const res = await fetch('https://catfact.ninja/fact');
    // The return value is *not* serialized
    // You can return Date, Map, Set, etc.
    return res.json();
}

export default async function Fact() {
    const name = use(getData());

    return (
        <div>
            {name.fact}
        </div>
    );
}

Expected Behavior

The root server component in page.tsx should render right away and the client component should render when the data was fetched. Before the data is fetched it should say Loading….

Link to reproduction

https://codesandbox.io/s/reverent-danilo-zgle45?file=/app/fact.tsx

To Reproduce

Open the link or copy paste the code inside your app

[apostolos]

Hi @AlexLup06,

The problem is with your client component. Async components are only supported on the server. If you remove the async keyword from Fact it should work fine.

You also need to remove the pages folder, that should allow Next to automatically create a layout.tsx in the app dir. It can't work without a root layout.

I forked your sandbox, you can find all these changes along with a working example here: https://codesandbox.io/s/next-appdir-use-i43p25

[AlexLup06]

Hi @apostolos
Why do the docs have an async on the client components?
But either way, I first did it the same way you did but would then face the problem of infinite fetch calls.

I would not stop calling the getData() function. When you remove the fetch() and the fakeDelay() it is being called 10000 times per second.
Might there be something wrong with use().

[apostolos]

Hi @AlexLup06,

This is an obvious bug in the docs. I left a comment.

Per React's RFC, async is only reserved for server components: https://github.com/acdlite/rfcs/blob/first-class-promises/text/0000-first-class-support-for-promises.md#usepromise

[apostolos]

@AlexLup06 regarding the infinite calling of fetch, based on the RFC again, the promise passed to use() is supposed to be cached (stable identity between renders).

There is a cache() function that we can use in the experimental React release but it's not implemented yet.

I've updated my example (https://codesandbox.io/s/next-appdir-use-i43p25?file=/app/fact.tsx) with how it is supposed work (commented out) plus a simple workaround to avoid infinite fetches with a simple caching of the fetch Promise. It's not correct due to the fact that the cache on the server and the cache on the client are not the same, therefore you get different results from the server render and from the client render.

Soon, Next.js will be able to pass the resolved promise from the server to the client somehow. That should avoid double-rendering (the server result will be used). You can read more about this in the RFC: https://github.com/acdlite/rfcs/blob/first-class-promises/text/0000-first-class-support-for-promises.md#passing-a-promise-from-a-server-component-to-a-client-component

[AlexLup06]

@apostolos
Thank you!
So for now we would have to use this (nasty) work around with the double render until they solve it?

[palmer-cl]

Im also having the same infinite fetch call issue.

[zenflow]

The cache() function seems to be already available in react 18.2.0 somehow..

Anyways I tried it and it fixed the infinite fetch issue on client side, but it throws a "Not implemented" error on server. (Remember client components are also rendered on server.)

Related issue: #41852

[palmer-cl]

Im confused on how there can be such a broken workflow in the docs as an example...

[zenflow]

Yeah, same here to be honest. I know it's beta but considering it's such a fundamental thing and not a detail or edge-case, it is surprising

[zenflow]

The cache() function seems to be already available in react 18.2.0 somehow..

I found out how: #41745 (comment)

[ShravanSunder]

I'm having the same issue with infinite fetch in use

Using cache has an error on the server side

Error: Not implemented.
    at Object.getCacheForType (/Users/shravansunder/Documents/dev/projects/2022-09-dpatron-experiments/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.development.js:7208:9)
    at /Users/shravansunder/Documents/dev/projects/2022-09-dpatron-experiments/node_modules/next/dist/compiled/react/cjs/react.development.js:1644:28
    at Component (webpack-internal:///(sc_client)/./src/app/TestComponent.tsx:25:62)
    at renderWithHooks (/Users/shravansunder/Documents/dev/projects/2022-09-dpatron-experiments/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.development.js:7629:16)
    at renderIndeterminateComponent (/Users/shravansunder/Documents/dev/projects/2022-09-dpatron-experiments/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.development.js:7702:15)