Optimistic UI(with SWR) 적용기

사용 배경

진행하는 프로젝트에서 좋아요 기능을 넣을 일이 있었습니다.

api 요청 후 DB에 좋아요가 추가된 것까지 확인 했으나, 정작 UI에는 좋아요가 반영되어 있지 않습니다.

브라우저 refresh, refocusing 등 서버 데이터 변경을 감지한 후에야 비로소 UI에도 반영이 되는 것이죠.

이에 대한 해결책을 알아보던 도중 알게 된 개념인 Optimistic UI의 적용기를 기록해보았습니다.

개념 및 사용

• Optimistic UI는 단어뜻 그대로 특정 요청이 성공 할 것이라(낙관적으로) 가정을 하고 미리 요청의 결과를 보여주는 방식의 UI입니다.
• 사용 상황은 다음과 같습니다.
  • 어떤 요청이 거의 확실하게 의도대로 동작한다는 보장이 있을 때
  • 요청이 너무 늦지 않은 시간 안에 응답이 온다는 보장이 있을 때
  • 사용자에게 응답을 즉시 보여줘야 할 때

Next.js에서의 Optimistic UI(with SWR)

프로젝트에서 적용해본 Optimistic UI 예시입니다.

• SWR의 mutate 함수를 사용하여 SWR이 가지고 있는 미리 캐시를 변경하고 POST 요청을 했습니다.

const Reaction = ({ memoId }: IProps) => {
  const { data: memoData, mutate: memoMutate } = useMemoData(memoId);
  const { mutation: likeMutation, loading: likeLoading } =
    useMutation<ILikeResponse>(`/api/likes?memoId=${memoId}`);

  const handleLike = () => {
    if (likeLoading) return;
		// memo에 속해있는 like를 mutate합니다.
    memoMutate(
      (prev) =>
        prev && {
          ...prev,
          isLiked: !prev.isLiked,
          likeLength: prev.isLiked ? prev.likeLength - 1 : prev.likeLength + 1,
        },
      false
    );
		// like를 변경하는 POST 요청을 합니다.
    likeMutation({}, "POST");
  };
  return (
    <>
      ...
        <LikeButton isLiked={!!memoData?.isLiked} handleLike={handleLike} />
      ...
    </>
  );
};
export default Reaction;