아니 페이지가 로딩이 완료되었는데 시간표 목록이 안 뜬다.
계속 누르면서 하염없이 기다리니 결국 뜨긴 하더라.
배포 사이트 lighthouse 성능 점수는 위와 같고
대체 뭐가 문제지 싶어서 개발자도구 확인해봤는데
서버 응답 기다리는 시간이 무려 4.44초나 된다. ms도 아니고 s....
그러니까 백엔드가 느린게 맞는거 같다. 하지만 지금 백엔드는 다른 할 일이 많기에 이거 수정해달라 할 수는 없어서 최대한 프론트에서 해결해보기로 했다.
근데 이상한 건 시간표 페이지에서 다른 페이지 갔다가 다시 시간표로 돌아오면 시간표 목록 렌더링 속도가 꽤 괜찮다. 문제는 시간표 페이지에 처음 진입할 때, 새로고침할 때다. Apollo에서 어느 정도 캐싱을 하는 건가...
아무튼 새로고침을 하면 브라우저가 JS context(mobx store, Apollo cache, memory cache 등)을 모두 초기화시켜서 api를 다시 호출해야 한다.
그럼.. 캐싱한 것이 날아가지 않도록 바꿔보는 것부터 해야겠다.
일단 시간표는 앱에서만 수정이 가능하다. 웹에서는 바꿀 수 없으므로 캐싱을 해보기로 했다.
그래서 일단... 로컬스토리지에 넣어서 로컬스토리지에 데이터가 없을 때만 api 호출하도록 했음.
그래서 새로고침했을 때는 이제 괜찮았는데 그래도 여전히 서버 응답 속도가 느려서 graphql에서 필요 없는 값 날렸다. 그랬더니 1초... 빨라졌다..
일단 다른 작업도 해야 해서 skeleton ui 적용해두었다.
성능점수도 꽤 높아졌는데 솔직히 skeleton ui 때문인 것 같아서 썩 그리 맘에 들지는 않는다
