Returning JSX from React Server Actions-JS Tutorial-php.cn

Did you know that Next.js Server Actions can return JSX markup instead of raw JSON data?

While it's not explicitly mentioned in the docs, I was pleasantly surprised that it works.

Example

I have a page that renders users list with server action:

export default function Page() { async function loadUsersAction() { "use server"; return [ { name: "John", age: 30 }, { name: "Jane", age: 25 }, { name: "Doe", age: 40 }, ]; } return ; }

Copy after login

UsersList component loads users by button click:

export default function UsersList({ loadUsersAction }) { const [users, setUsers] = useState(); const onClick = async () => { const data = await loadUsersAction(); setUsers(data); }; return ( <>   {users?.map((user) => (  {user.name} - {user.age} 
 ))} 
  ); }

Copy after login

Demo:

Returning JSX from React Server Actions

Now I change server action to returnJSX with rendered users:

async function loadUsersAction() { "use server"; const users = [ { name: "John", age: 30 }, { name: "Jane", age: 25 }, { name: "Doe", age: 40 }, ]; return (  {users?.map((user) => (  {user.name} - {user.age} 
 ))} 
 ); }

Copy after login

And in UsersList component just render server action response:

export default function UsersList({ loadUsersAction }) { const [users, setUsers] = useState(); const onClick = async () => { const data = await loadUsersAction(); setUsers(data); }; return ( <>  {users}  ); }

Copy after login

In browser everything works in the same way!

Note on errors handling

What if server action throws an error? When it returns a JSON data, we can catch that error inside action and return it in own format like:

{ error: "my error" }

Copy after login

When returning JSX, we can let error throw and catch it with the nearest error boundary on the client. Per React docs, server action calls outside the

component should be wrapped into Transition for proper errors handling.
The final code of UsersList component:

export default function UsersList({ loadUsersAction }) { const [isPending, startTransition] = useTransition(); const [users, setUsers] = useState(); const onClick = () => { startTransition(async () => { const data = await loadUsersAction(); setUsers(data); }); }; return ( <>  {isPending ? Loading users...
 : users}  ); }

Copy after login

Additionally, I utilize isPending flag to show message while loading users.

Demo:
Returning JSX from React Server Actions

Hope it would be helpful.
Thanks for reading and happy coding! ❤️

The above is the detailed content of Returning JSX from React Server Actions. For more information, please follow other related articles on the PHP Chinese website!