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

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

[jescalan]

👋 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!

[ShravanSunder]

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