Action client component in NextJS 14 #62057

roggc · 2024-02-14T16:31:40Z

roggc
Feb 14, 2024

You can make an Action client component like this:

"use client";

import { Suspense, useMemo } from "react";
import { usePropsChangedKey } from "@/app/hooks";
import useSWR from "swr";

const fetcher = (action, props) =>
  new Promise((r) => setTimeout(async () => r(await action(props))));

const fetcherSWR = ([, action, props]) => fetcher(action, props);

const Error = ({ errorMessage }) => <>Something went wrong: {errorMessage}</>;

const getReader = () => {
  let done = false;
  let promise = null;
  let value;
  return {
    read: (fetcher) => {
      if (done) {
        return value;
      }
      if (promise) {
        throw promise;
      }
      promise = new Promise(async (resolve) => {
        try {
          value = await fetcher();
        } catch (error) {
          value = <Error errorMessage={error.message} />;
        } finally {
          done = true;
          promise = null;
          resolve();
        }
      });

      throw promise;
    },
  };
};

const Read = ({ fetcher, reader }) => {
  return reader.read(fetcher);
};

const ReadSWR = ({ swrArgs, fetcher }) => {
  return useSWR(swrArgs, fetcher, {
    revalidateOnFocus: false,
    revalidateOnReconnect: false,
    suspense: true,
  }).data;
};

export default function Action({
  action,
  children = <>loading...</>,
  isSWR = false,
  ...props
}) {
  const propsChangedKey = usePropsChangedKey(...Object.values(props));

  const reader = useMemo(() => getReader(), [propsChangedKey]);

  const propsForSWR = useMemo(() => props, [propsChangedKey]);
  const swrArgs = useMemo(
    () => [propsChangedKey, action, propsForSWR],
    [action, propsForSWR, propsChangedKey]
  );

  return (
    <Suspense fallback={children}>
      {isSWR ? (
        <ReadSWR swrArgs={swrArgs} fetcher={fetcherSWR} />
      ) : (
        <Read fetcher={() => fetcher(action, props)} reader={reader} />
      )}
    </Suspense>
  );
}

Then you can use it like this in any client component (also server component):

"use client";
import Action from "@/app/action";
import { greeting } from "@/app/actions/greeting";

export default function Client1() {
  return <Action action={greeting} userId={1} />;
}

In this case greeting action is like this:

"use server";
import Greeting from "@/app/action-components/greeting";
import MyError from "@/app/action-components/my-error";

const users = [{ id: 1, username: "roggc" }];

export async function greeting({ userId }) {
  try {
    const username = await new Promise((r) => {
      setTimeout(() => {
        const user = users.find((u) => u.id === userId);
        if (user) {
          r(user.username);
        }
      }, 500);
    });
    // throw new Error("crash!");
    return <Greeting username={username} />;
  } catch (error) {
    return <MyError errorMessage={error.message} />;
  }
}

and Greeting component is like this:

"use client";

export default function Greeting({ username }) {
  return <>hello {username}</>;
}

You call your Client1 component from Home server component:

"use client";

import Client1 from "@/app/components/client-1";
import { useState } from "react";

export default function Home() {
  const [isStart, setIsStart] = useState(false);
  return (
    <>
      <button onClick={() => setIsStart(true)}>start</button>
      {isStart && <Client1 />}
    </>
  );
}

But for this to work you must also import greeting action in Home server component or in RootLayout server component, like this:

import { Inter } from "next/font/google";
import { greeting } from "@/app/actions/greeting"; // <-- this is necessary, if not fails to compile

const inter = Inter({ subsets: ["latin"] });

export const metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body className={inter.className}>{children}</body>
    </html>
  );
}

If you don't do this last step you get following server error:

⨯ Error: Could not find the module "C:\Users\roggc\dev\nextjs\test1\app\action-components\greeting.js#" in the React Client Manifest. This is probably a bug in the React Server Components bundler. at stringify (<anonymous>)

The idea is any action returns a client component, and are called through Action client component. Action client component accepts an action prop plus any number of other props which will passed to the action itself (except functions, which cannot be stringified; for this last case you must use a library like jotai-wrapper to store the functions in the global shared state before calling the Action component and recovering its value in the Greeting client component).

This way of coding comes from this setup, also explained here.

Now, with this shown here, you can also code like this in NextJS 14.

The code shown in here is from this repository.

This is the result in the browser:

and after 500 ms:

with no errors, no warnings, neither in the client or the server. Also works with npm run build and npm start (and of course with npm run dev).

There is also a MyError client component we return in case of error in the server action:

"use client";

export default function MyError({ errorMessage }) {
  return <>Something went wrong: {errorMessage}</>;
}

When uncomenting line // throw new Error("crash!"); in server action, the result is this on the screen (after the loading...):

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Action client component in NextJS 14 #62057

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 0 comments

Select a reply

Uh oh!

Action client component in NextJS 14 #62057

Uh oh!

Uh oh!

roggc Feb 14, 2024

Replies: 0 comments

roggc
Feb 14, 2024