React Server Actions에서 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 Server Actions에서 JSX 반환하기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!