React Server Actions에서 JSX 반환하기

Next.js 서버 작업이 원시 JSON 데이터 대신 JSX 마크업을 반환할 수 있다는 것을 알고 계셨습니까?

문서에 명시적으로 언급되어 있지는 않지만 작동한다는 사실에 놀랐습니다.

예

서버 작업으로 사용자 목록을 렌더링하는 페이지가 있습니다.

UsersList 구성 요소는 버튼 클릭으로 사용자를 로드합니다.

데모:

이제렌더링된 사용자가 포함된 JSX:
를 반환하도록 서버 작업을 변경합니다.

그리고 UsersList 구성 요소에서는 서버 작업 응답을 렌더링합니다.

브라우저에서는 모든 것이 동일한 방식으로 작동합니다!

오류 처리에 대한 참고 사항

서버 액션에서 오류가 발생하면 어떻게 되나요? JSON 데이터를 반환하면 작업 내에서 해당 오류를 포착하고 다음과 같은 자체 형식으로 반환할 수 있습니다.

JSX를 반환할 때 클라이언트에서 가장 가까운 오류 경계를 사용하여 오류를 발생시키고 포착할 수 있습니다. React 문서에 따르면 서버 작업은