stale-while-revalidate
npm i swr
컴포넌트가 로딩되면 url로 요청이 전송
그러면, 훅으로 반환된 data로 작업을 할 수 있음.
그 데이터가 바로 , 구조 분해 가능 객체
Firebase 에서 반환되는 data는 옳은 형식이 아니라, 변환해야 한다.
useEffect
를 사용
데이터가 있는지 확인해도 변환되지 않은 상태일 수 있음/
=> !sales 로 확인
지금까지 작성한 위에 코드
page source 를 확인해도 data는 볼 수 없지만
loading은 보임/
왜냐?
=> 시작 상태가 바로 컴포넌트 초기 버전
이 렌더링되기 때문임
=>
처음에는 error가 정의되지 않으니 이 text는 반환되지 않음.
처음에는 data와 sales가 정의되지 않으니, 이 text가 반환됨.
그래서, 이 부분이 사전 렌더링된 page의 일부처럼 보이게 됨.
"data fetching은 client side에서만 이뤄진다."