✏️ Optimistic Update

📚 이론정리/React & Next.js

서카츄 2024. 2. 18. 20:05

옵티미스틱 업데이트는 직역하면 낙관적인 업데이트이다.

서버에 요청을 보내고 나서 낙관적으로 바라보는 업데이트라고 보면 된다.

먼저 일반적인 흐름이다.

사용자가 브라우저에서 `좋아요` 버튼을 클릭하면 백엔드에 요청이 보내지고,

백엔드에서는 데이터베이스에 가서 실제 데이터를 바꾸고 나서 서버에 보내주고, 다시 바뀐 결과를 클라이언트에 전달해준다.

그럼 클라이어트에서는 글로벌 스테이트에 있는 캐시를 수정하고 나서 현재 결과를 렌더링 해준다.

다시 이미지로 옵티미스틱 업데이트 방식을 살펴보자.

사용자가 좋아요를 클릭하면, 서버에 요청을 보내자마자 글로벌 스테이트로 가서 캐시를 먼저 수정해놓는다.

수정한 결과를 화면에 바로 렌더링해준다.

그럼 서버는 다시 데이터베이스에 가서 실제 데이터를 바꾸고, 다시 클라이언트로 보내주는데 여기서 `비교`를한다.

그래서 옵티미스틱 업데이트는 서버에서 성공인지 실패인지도 모르는 상황인데 미리 화면을 보여주는 것이기 때문에

성공해도, 실패해도 영향이 없는 곳에 사용해야 한다.