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 l'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 <UsersList loadUsersAction={loadUsersAction} />;
}

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 (
    <>
      <button onClick={onClick}>Load users</button>
      <ul>
        {users?.map((user) => (
          <li key={user.name}>
            {user.name} - {user.age}
          </li>
        ))}
      </ul>
    </>
  );
}

Démo :

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

async function loadUsersAction() {
  "use server";

  const users = [
    { name: "John", age: 30 },
    { name: "Jane", age: 25 },
    { name: "Doe", age: 40 },
  ];

  return (
    <ul>
      {users?.map((user) => (
        <li key={user.name}>
          {user.name} - {user.age}
        </li>
      ))}
    </ul>
  );
}

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 (
    <>
      <button onClick={onClick}>Load users</button>
      {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

Le composant doit être enveloppé dans Transition pour une gestion appropriée des erreurs.
Le code final du composant UsersList :

export default function UsersList({ loadUsersAction }) {
  const [isPending, startTransition] = useTransition();
  const [users, setUsers] = useState();

  const onClick = () => {
    startTransition(async () => {
      const data = await loadUsersAction();
      setUsers(data);
    });
  };

  return (
    <>
      <button onClick={onClick}>Load users</button>
      {isPending ? <div>Loading users...</div> : users}
    </>
  );
}

De plus, j'utilise l'indicateur isPending pour afficher le message lors du chargement des utilisateurs.

Démo :

J'espère que cela sera utile.
Merci d'avoir lu et bon codage ! ❤️

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!