TomDohnal Posts - Answer Overflow

TomDohnal

Explore posts from servers

•Created by TomDohnal on 12/17/2024 in #questions

Am I missing the point of using `use` for data fetching with server components?

In the react docs, they give the following example for how to use the use function:

// page.tsx
import { fetchMessage } from './lib';
import { Message } from './message';

export default function App() {
  const messagePromise = fetchMessage();
  return (
    <Suspense fallback={<p>waiting for message...</p>}>
      <Message messagePromise={messagePromise} />
    </Suspense>
  );
}

// message.tsx
'use client';

import { use } from 'react';

export function Message({ messagePromise }) {
  const messageContent = use(messagePromise);
  return <p>Here is the message: {messageContent}</p>;
}

// page.tsx
import { fetchMessage } from './lib';
import { Message } from './message';

export default function App() {
  const messagePromise = fetchMessage();
  return (
    <Suspense fallback={<p>waiting for message...</p>}>
      <Message messagePromise={messagePromise} />
    </Suspense>
  );
}

// message.tsx
'use client';

import { use } from 'react';

export function Message({ messagePromise }) {
  const messageContent = use(messagePromise);
  return <p>Here is the message: {messageContent}</p>;
}

I'm not quite sure I get the benefit of doing that over having the Message component be a server component and fetch the data in there:

// page.tsx
import { Message } from './message';

export default function App() {
  return (
    <Suspense fallback={<p>waiting for message...</p>}>
      <Message />
    </Suspense>
  );
}

// message.tsx
import { fetchMessage } from './lib';

export async function Message() {
  const messageContent = await fetchMessage()
  return <p>Here is the message: {messageContent}</p>;
}

// page.tsx
import { Message } from './message';

export default function App() {
  return (
    <Suspense fallback={<p>waiting for message...</p>}>
      <Message />
    </Suspense>
  );
}

// message.tsx
import { fetchMessage } from './lib';

export async function Message() {
  const messageContent = await fetchMessage()
  return <p>Here is the message: {messageContent}</p>;
}

To me it seems like the two examples lead to the equivalent UX and I don't see any benefit of using the use function and passing the promise from the server component to the client component. Am I missing the point?

1 replies

Gaming

Programming