Next.js 학습v16.3.2
시각화 목록
React · Optimistic UI

Optimistic UI (Server Actions)

클릭 이벤트의 대기 막대가 한쪽은 420ms 빨간 막대로, 다른 쪽은 점 하나로 끝납니다. 네트워크 왕복 380ms는 양쪽 다 존재하지만 한쪽만 사용자를 붙잡습니다.

0ms / 600ms
클릭 처리UI 갱신Server Action서버 상태 확정스피너 대기
클릭 → 화면 반영420ms→0ms즉시 반영타임라인을 드래그하면 그 시각으로 이동합니다 · 블록에 마우스를 올리면 아래 설명과 연결됩니다

🔒 전통적 요청 — 응답을 봐야 그린다

420ms

클릭하면 스피너를 띄우고 서버 응답을 기다린다. 네트워크가 왕복하는 400ms 동안 화면은 아무 변화가 없어 눌린 것인지조차 불확실하다.

  1. ①
    클릭 처리40ms – 50ms

    좋아요 버튼의 클릭 핸들러가 요청을 만든다.

  2. ②
    스피너 대기50ms – 420ms

    서버 왕복이 끝날 때까지 로딩 스피너만 돈다. 좋아요 수는 그대로다.

  3. ③
    응답 반영420ms – 460ms

    응답이 도착한 뒤에야 좋아요 수가 +1 된다.

  • 좋아요 · 420ms 대기

⚡ useOptimistic — 화면부터 먼저

0ms

성공을 가정하고 화면을 먼저 갱신한 뒤, 실제 저장은 Server Action이 백그라운드에서 처리한다. 실패하면 자동으로 이전 상태로 되돌아간다.

  1. ①
    클릭 처리40ms – 46ms

    클릭 핸들러가 낙관적 상태를 즉시 갱신한다.

  2. ②
    낙관적 렌더46ms – 60ms

    네트워크를 기다리지 않고 같은 프레임에 좋아요 수가 +1 된다.

  3. ③
    Server Action60ms – 440ms

    실제 DB 저장은 백그라운드에서 진행된다. 사용자는 이 시간을 체감하지 않는다.

  4. ④
    확정 반영440ms – 470ms

    서버가 확정한 값으로 조용히 교체된다. 실패했다면 여기서 롤백된다.

  • 좋아요 · 0ms 대기

같은 그룹의 다른 시각화