Renvoi de JSX à partir des actions du serveur React

Saviez-vous que les actions du serveur Next.js peuvent renvoyer un balisage JSX au lieu de données JSON brutes ?

Bien que ce ne soit pas explicitement mentionné dans la documentation, j'ai été agréablement surpris que cela fonctionne.

Exemple

J'ai une page qui affiche la liste des utilisateurs avec une action du serveur :

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

Le composant UsersList charge les utilisateurs en cliquant sur un bouton :

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

Démo :

Maintenant, je change l'action du serveur pour renvoyerJSX avec les utilisateurs rendus:

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} 
 ))} 
 ); }

Et dans le composant UsersList, restituez simplement la réponse à l'action du serveur :

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

Dans le navigateur, tout fonctionne de la même manière !

Remarque sur la gestion des erreurs

Et si l'action du serveur génère une erreur ? Lorsqu'il renvoie des données JSON, nous pouvons détecter cette erreur dans l'action et la renvoyer dans notre propre format comme :

{ error: "my error" }

Lors du retour de JSX, nous pouvons laisser l'erreur se déclencher et l'attraper avec la limite d'erreur la plus proche sur le client. Selon la documentation React, les appels d'action du serveur en dehors du

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