👋 Hi friends! Really appreciate all the investigation and discussion here. I spoke with the team about this and it looks like, perhaps as expected, we don’t have this functionality quite finished yet. We tried to clarify in the docs that fetch is not yet supported in client components - the recommendation right now is to fetch data in server components.

This is a feature that will be supported in the future for sure, but this is a beta release and we’re not quite there yet. Thank you so much for testing out the new app directory, and I’ll update you all here once we do support fetching in client components!

The infinite use() client error and cache server error are roadblock to get next 13 to work

Am I missing something? 🤔

@balazsorban44 No, I don’t think so. My mistake. There are no async client components in docs that I’m aware of. My apologies…

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().

Nextjs 13 is now stable with

INFINITE

LOOP

BUG

@balazsorban44 The async on the client component was already changed. But there really was one.

The problem actually exactly happens when calling the function with the fetch in use()

@iSuslov Please be nice to the people working on open source project. Our company is using Next.js 13 and it is amazing!

That did it. Thanks @apostolos

@palmer-cl cache() takes a function declaration as the only argument. You are not supposed to call it inside render.

See the commented code in my example: https://codesandbox.io/s/next-appdir-use-i43p25?file=/app/fact.tsx

Try this:

const getData = cache(async () => {
  const res = await fetch('https://v2.jokeapi.dev/joke/Any?safe-mode');
  return res.json();
});

Then, inside render call the wrapped function:

export default function Impact() {
  const data = use(getData());
  return (<>...</>);
}

"use client";

import { use } from 'react';

async function getData() {
  const res = await fetch('https://api.example.com/...');
  // The return value is *not* serialized
  // You can return Date, Map, Set, etc.
  return res.json();
}

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

  return '...';
}

I cannot see async on the exported Page component. Am I missing something? 🤔

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

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

@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