前端進階
-甚麼是樂觀更新 Optimistic Updates？增強用戶體驗的技術
甚麼是樂觀更新 Optimistic Updates？
樂觀更新(Optimistic Updates) 是一種增加用戶體驗的技術。
在前端做 request 的時候，如果我們一開始就直接預設伺服器回應會成功，那就是樂觀更新，比如說 IG 按愛心的功能。
在按愛心的時，IG 已經假定伺服器回應會成功，所以直接在畫面上顯示成功的 UI 更新，直接在圖片上覆蓋一個大大的愛心。同時，取消愛心的時候也是，IG 也是直接設定取消愛心的伺服器回應會成功，所以在畫面上直接更新取消愛心的 UI。
樂觀更新 Optimistic Updates 的優點
樂觀更新的優點是對使用者的互動體驗很好，如果我們要等待伺服器回應成功後，畫面才更新，這會使的互動有延遲感。
你能想像你在 IG 或 FB 按愛心時，等了 5 秒才更新畫面嗎？想必這樣體驗會很糟糕。
使用樂觀更新 Optimistic Updates
什麼時候適合使用樂觀更新 Optimistic Updates
以下幾種情況可以考慮樂觀更新來增加體驗：
- 低風險操作：操作失敗的後果並不嚴重，可以輕易還原。
- 需要即時反饋：一些操作需要立即給予用戶回饋，比如郵件發送成功提示、購物車更新等。
- 只有兩種情況時：當操作只有兩種情況的時候，例如喜歡/不喜歡，按讚/不按讚等等。
總之，當操作風險不大時，都可以嘗試樂觀更新，像 IG 如果愛心功能失效，他只要還原 UI 即可。
什麼時候不適合使用樂觀更新 Optimistic Updates
當操作涉及到一些嚴格要求一致性，或高風險操作的使用場景時，例如銀行轉帳、訂單支付等等，可能就不太適合使用樂觀更新，因為一旦失敗，可能會造成畫面和資料的不一致，導致一些不可預期的後果。
當回應失敗時如何處理樂觀更新？
大部分的產品在伺服器回應失敗時，會採用三種方法
- 直接還原本地 UI：最直接的方法是在請求失敗時，將本地狀態還原到操作之前的狀態。這種方法適用於可以輕易還原的場景，例如按讚不按讚。
- 顯示錯誤訊息：如果還原狀態還不夠，可以跳出錯誤訊息通知用戶。
- 自動重試：有些時候，產品會自動重式失敗的操作，而不是立即還原狀態。
小結
今天介紹了何謂樂觀更新 Optimistic Update，是非常常見的技術，在某些場景下給已讓用戶的體驗大增，希望這篇能讓你更了解樂觀更新！
如果你想知道怎麼在 React 中使用樂觀更新，可以參考我寫的這篇文章，裡面有關於 React 19 更新的 useOptimistic 的詳細介紹。