從 React 伺服器操作返回 JSX

您知道 Next.js 伺服器操作可以傳回 JSX 標記而不是原始 JSON 資料嗎？

雖然文件中沒有明確提及，但我對它的運作方式感到驚訝。

例子

我有一個使用伺服器操作呈現使用者清單的頁面：

雷雷

UsersList 元件透過點選按鈕載入使用者：

雷雷

示範：

現在我更改伺服器操作以返回帶有渲染用戶的 JSX:

雷雷

在 UsersList 元件中只渲染伺服器操作回應：

雷雷

在瀏覽器中一切都以相同的方式工作！

錯誤處理注意事項

如果伺服器操作拋出錯誤怎麼辦？當它返回 JSON 資料時，我們可以在操作中捕獲該錯誤並以自己的格式返回它，例如：

雷雷

返回 JSX 時，我們可以讓錯誤拋出並用客戶端上最近的錯誤邊界捕獲它。根據 React 文檔，伺服器操作調用在

之外。組件應該被包裝到 Transition 中以進行正確的錯誤處理。
UsersList組件的最終程式碼：
雷雷

此外，我利用 isPending 標誌在載入使用者時顯示訊息。

示範：

希望對您有幫助。
感謝您的閱讀並祝您編碼愉快！ ❤️

以上是從 React 伺服器操作返回 JSX的詳細內容。更多資訊請關注PHP中文網其他相關文章！