https://github.com/0seo8/instagram/commit/58a8076e6e6861946886b69c0741c56f739add52

const [keyword, setKeyword] = useState('');
  const {
    data: users,
    isLoading,
    error,
  } = useSWR<ProfileUser[]>(`/api/search/${keyword}`);

현재까지 구현된 코드로는 anna라고 검색을 한번 하기 위해서는 SWR로 a, an, ann, anna까지 여러번 계속 요청이 들어가는 것을 확인할 수 있습니다.

내부적으로 키워드가 변경될 때마다 SWR요청이 계속 들어가게 코드가 구현되어 있기 때문입니다. 이런 경우 프로덕션 용으로는 백앤드에 과부화가 걸리기 떄문에 성능에 좋지 않기에 디바운싱을 하는 것을 권장합니다.

디바운싱이란 쉽게 설명을 하면, 사용자가 키워드를 입력할 때마다 요청을 보내는 것이 아니라, 사용자가 키워드를 입력하다 멈추면 그 때 요청을 보내고 사용자가 키워드를 삭제하다 멈추면 그때 요청을 보내고 다시 사용자가 입력을 하다 멈추면 그 때 네트워크 요청을 보내는 것입니다. 즉 이벤트 요청이 발생했다가 그 이벤트 요청이 끝날 때를 기다렸다가 그 이벤트가 끝날 때 요청을 보내는 것을 디바운싱이라고 합니다.

(반면 쓰로링의 경우, 일정한 간격으로 끊어서 한번 처리를 해줍니다.)

https://github.com/vercel/swr/issues/110

https://redd.one/blog/debounce-vs-throttle

https://github.com/0seo8/instagram/commit/462c3503b822c82c6c64085396a6f56416df9edf