옵티미스틱 UI (Optimistic UI)
- 서버로부터 받는 응답이 대부분 '오류가 나지 않을 것이다. 성공적일 것이다'라고 가정하고
사용자에게 성공했을 때의 결과를 바로 보여주는 것- 낙관적인 상황, 거의 확정적인 상황, 실패해도 크게 상관없는 상황에서 사용
사용 예) 좋아요, 싫어요 버튼, 찜하기 등등..
!! 거의 확정적인 상황에서 쓰이는 기능인 만큼, 중요한 상황(ex) 결제 등등..)에서는 쓰이면 안됨!!
옵티미스틱 ui 방법을 사용하여 좋아요 버튼을 +1 했을 때 예시
1 ) 사용자(브라우저) : 좋아요 +1 클릭
→ 2 ) 좋아요 갯수가 1개 증가한 UI를 바로 보여준다.
(백엔드 & DB와 데이터 통신 없이 일단 좋아요 +1만큼 데이터 업데이트 했다고 가정하고, 먼저 Cache를 업데이트하여 브라우저에 좋아요 +1 만큼 업데이트해서 사용자에게 보여줌. )
→ 3 ) 서버에 mutation을 요청한다.
(백엔드에게 좋아요 +1이 된 데이터를 전송 & DB에 좋아요+1 데이터 업데이트)
→ 4 ) 서버에서 응답을 받는다.
( 2번에서 가정하여 미리 업데이트 시켰던 정보와 백엔드&DB에 업데이트 된 정보가 일치하는지 체크)
: 데이터 전송하여 업데이트를 성공했으면 미리 업데이트 해둔 정보 유지
: 서버에서 업데이트 실패했다는 응답을 받으면 실패한 정보로 다시 그려줌.
-
대부분 네트워크 속도가 빨라서 optimistic 적용된 것이 보이지 않음
= 속도 slow3G로 설정해서 확인해볼 것.
-
cf) 옵티미스틱 ui 방법을 사용하지 않고 좋아요 버튼을 +1 했을 때 예시
refetchQueries를 한 상황 : refetch는 query가 한 번씩 더 보내지는 거라 왠만하면 안쓰려고 optimistic ui를 사용하는 것임.
1. 사용자(브라우저) 좋아요 +1클릭
→ 2.onClick함수 실행되고 서버에mutation요청 전송
→ 3. 서버에 보낸 요청이 완료될 때까지await로 기다린다.
→ 4. 완료됐다는 응답이 오면refetch를 해서 좋아요 갯수 데이터를 다시 가져온다.
→ 5. 가져온 데이터를 화면에 보여준다.
= 데이터 사이에 왔다갔다 多 = 텀 1~2초 생길 수 있음.
