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

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

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

例

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

リーリー

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

リーリー

デモ:

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

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

リーリー

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

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

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

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

の外で呼び出します。エラーを適切に処理するには、コンポーネントを Transition にラップする必要があります。
UsersList コンポーネントの最終コード:

リーリー

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

デモ:

お役に立てば幸いです。

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

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