React サーバーから JSX を返すアクション

Next.js サーバー アクションは生の JSON データではなく JSX マークアップを返すことができることをご存知ですか?

ドキュメントには明示的に記載されていませんが、機能することに嬉しい驚きを感じました。

例

サーバーアクションを使用してユーザーリストをレンダリングするページがあります:

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

UsersList コンポーネントは、ボタンのクリックによってユーザーを読み込みます:

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

デモ:

次に、レンダリングされたユーザーを含む JSX を返すようにサーバー アクションを変更します。
:

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

UsersList コンポーネントでは、サーバー アクションの応答をレンダリングするだけです:

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

ブラウザではすべて同じように動作します!

エラー処理に関する注意事項

サーバーアクションでエラーがスローされた場合はどうなりますか? JSON データが返されると、アクション内でそのエラーをキャッチし、次のような独自の形式で返すことができます。

{ error: "my error" }

JSX を返すときに、エラーをスローさせ、クライアント上の最も近いエラー境界でキャッチすることができます。 React のドキュメントによると、サーバー アクションは

の外で呼び出します。エラーを適切に処理するには、コンポーネントを Transition にラップする必要があります。
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}
    </>
  );
}

さらに、isPending フラグを利用して、ユーザーの読み込み中にメッセージを表示します。

デモ:

お役に立てば幸いです。

読んでいただきありがとうございます。コーディングを楽しんでください。 ❤️

以上がReact サーバーから JSX を返すアクションの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。