Once on client side, fetch data from within server actions that return components

[roggc]

My idea or suggestion is this, to use server actions, once on the client side, to fetch data and return components (Client or not). I have tried with Waku and it's possible, without any errors or warnings on the console. For example let's say we have a home page (server component) like this:

//src/pages/index.tsx
import HomePage from "../components/home-page";

export default async function HomePageServer() {
  return <HomePage />;
}

Then HomePage will be like this:

//src/components/home-page.tsx
"use client";

import { greeting } from "../server-actions/greeting";
import { Suspense, useState } from "react";

export default function HomePage() {
  const [start, setStart] = useState(false);

  return (
    <>
      <button onClick={() => setStart(true)}>start</button>
      {start ? <Suspense fallback="loading ...">{greeting()}</Suspense> : null}
    </>
  );
}

greeting is a server action that performs a fetching of data and returns a client component with the fetched data passed as prop to the component:

//src/server-actions/greeting.tsx
"use server";

import Greeting from "../components/greeting";

export async function greeting() {
  await new Promise((r) => setTimeout(r, 1000));
  return <Greeting name="Roger" />;
}

Greeting is this case a component (Client or not):

//src/components/greeting.tsx
"use client";

export default function Greeting({ name }: { name: string }) {
  return <>{name}</>;
}

But an even better approach would be to use non blocking server actions, that is, instead of awaiting in the fetching of data, pass the promise to the returned component by the server action.

//src/pages/index.tsx
import HomePagePromise from "../components/home-page-promise";

export default async function HomePageServer() {
  return <HomePagePromise />;
}

//src/components/home-page-promise.tsx
"use client";

import { greetingPromise } from "../server-actions/greeting-promise";
import { Suspense, useState } from "react";

export default function HomePagePromise() {
  const [start, setStart] = useState(false);

  return (
    <>
      <button onClick={() => setStart(true)}>start</button>
      {start ? (
        <Suspense fallback="loading...">{greetingPromise()}</Suspense>
      ) : null}
    </>
  );
}

//src/server-actions/greeting-promise.tsx
"use server";

import GreetingPromise from "../components/greeting-promise";

export function greetingPromise() {
  const promise = new Promise<string>((r) =>
    setTimeout(() => r("Roger"), 1000)
  );

  return <GreetingPromise promise={promise} />;
}

//src/components/greeting-promise.tsx
"use client";

import { Suspense } from "react";

export default function GreetingPromise({
  promise,
}: {
  promise: Promise<string>;
}) {
  return (
    <>
      <div>hey</div>
      <div>
        <Suspense fallback="loading###">{promise}</Suspense>
      </div>
    </>
  );
}

This works and the advantage respect the first approach (the blocking one), is that in this case the 'hey' content appears immediately on the screen without waiting for the promise to fulfill.

What do you think of this idea or approach? Isn't great that Waku allows to implement it in a straightforward way without any errors on Console or warnings? Would you use this approach? Any comments are appreciated. Thanks.

//edit
In the case of the promise resolving to an array, if we want to make use of the map function in the array resolved, we can use the use function from React:

//src/server-actions/greeting-promise.tsx
"use server";

import GreetingPromise from "../components/greeting-promise";

export function greetingPromise() {
  const promise = new Promise<string[]>((r) =>
    setTimeout(() => r(["Roger", "Alex"]), 1000)
  );

  return <GreetingPromise promise={promise} />;
}

//src/components/greeting-promise.tsx
"use client";

import { Suspense, use } from "react";

export default function GreetingPromise({
  promise,
}: {
  promise: Promise<string[]>;
}) {
  const Comp = () => {
    const data = use(promise);
    return data.map((item) => <div key={item}>{item}</div>);
  };

  return (
    <>
      <div>hey</div>
      <div>
        <Suspense fallback="loading###">
          <Comp />
        </Suspense>
      </div>
    </>
  );
}

//edit 2
An evolution of this last approach is to define a component SuspenseWithUse like this:

import { ReactNode, Suspense, use } from "react";

type UseProps<T> = {
  promise: Promise<T>;
  children: (data: T) => ReactNode;
};

const Use = <T,>({ promise, children }: UseProps<T>) => {
  const data = use(promise);
  return children(data);
};

type SuspenseWithUseProps<T> = {
  fallback: ReactNode;
} & UseProps<T>;

const SuspenseWithUse = <T,>({
  fallback,
  promise,
  children,
}: SuspenseWithUseProps<T>) => (
  <Suspense fallback={fallback}>
    <Use promise={promise}>{children}</Use>
  </Suspense>
);

export default SuspenseWithUse;

And use it in our GreetingPromise client component:

//src/components/greeting-promise.tsx
"use client";

import SuspenseWithUse from "./suspense-with-use";

export default function GreetingPromise({
  promise,
}: {
  promise: Promise<string[]>;
}) {
  return (
    <>
      <div>hey</div>
      <div>
        <SuspenseWithUse fallback="Loading###" promise={promise}>
          {(data) => data.map((item) => <div key={item}>{item}</div>)}
        </SuspenseWithUse>
      </div>
    </>
  );
}

[dai-shi]

See some examples:

• https://github.com/dai-shi/waku/tree/main/examples/51_spa
• https://github.com/dai-shi/waku/tree/main/examples/52_tanstack-router