SWR

React는 UI 라이브러리이기 때문에, **서버의 상태**를 동기화하는 방법을 제공하지 않음
- Redux : saga, toolkit과 같은 라이브러리를 사용할 수 있다
  - 단, boilerplate가 길어진다.
  - 그런데, Redux는 선언형 데이터를 관리하므로 데이터 흐름이 보기 쉬움.
SWR은 API 캐싱을 위한 React Hooks 라이브러리
- 동일한 엔드 포인트에 대해 데이터의 일관성 보장
  - 데이터 변경을 원할 시 임의로 mutate 함수를 사용
- 일정 주기로 서버에 요청을 보내는 옵션이 있음.
- 다양한 옵션이 존재.
Axios 으로도 API 캐싱을 할 수 있다. 다만 커스텀이 귀찮을 뿐.

react-query 너, 다음에 보자..

본래 스터디 주제는 react-qurey 였다.
공부하다 보니 공식문서도 아직은 별로이고, 자료도 생각보다 많지 않았음.

한국어 친화(?) 적인 SWR 공식문서이 일단 너무 맘에 들고, SWR이 정리된 글이 많아 react-query와 동일하게 Server-State 관리 라이브러리인 SWR을 학습하기로 결정!

React-hooks library for Data fetching The name “SWR” is derived from stale-while-revalidate

GitHub - vercel/swr: React Hooks for data fetching

(1) Cach-Control
- Reqeust, Response 모두에 존재하는 캐시 정책을 정의하는 HTTP HEADER 이다. Ex) Cach-Control : max-age=300 캐시의 유효시간은 300초
(2) stale-while-revalidate
- Cach-Control의 확장 기능 중 하나.
<aside> 💡 Cache-Control: max-age=<seconds>, stale-while-revalidate=<seconds>

</aside>
- (1) 0 ~ max-age : 캐시를 별도로 검증하지 않고 그대로 반환하는 최대 시간
- (2) max-age - max-age + stale-while-revalidate : max-age ~ max-age + stale-while-revalidate 시간 동안은 캐싱 된 값을 반환하 되, 백그라운드를 통해 캐시를 검증하기 위한 요청을 보냄
- (3) max-age + stale-while-revalidate - : 캐시된 값을 사용하지 않고, 다시 서버에 요청을 함.
예시)

Cache-Control: max-age=1, stale-while-revalidate=59 (출처 : https://jooonho.com/web/2021-05-16-stale-while-revalidate/)

Untitled

<aside> 💡 const { data, error, isValidating, mutate } = useSWR(key, fetcher, options)

</aside>

/api/user