스켈레톤 UI와 캐시로 블로그 대기 시간 줄이기

현재는 블로그 백엔드 서버의 최소 인스턴스가 0으로 되어 있다. 그래서 첫 접속 시에는 Posts 화면을 로딩하는 데 시간이 조금 걸린다. 기존에는 그냥 동그랗게 돌아가는 로딩 UI를 사용했는데, 처음 접속 시 사용자들에게 보이는 화면이 너무 심심해 보였다. 단순히 돌아가는 화면만 보여줘서 무슨 콘텐츠를 제공한다는 것인지 불확실하기도 했다.

캐시 방식도 문제였다. 기존에는 Post 리스트나 Post 상세 모두 최신 데이터를 받게 한다는 생각으로 no-store로 처리했다. 그런데 지금 생각해보니 개인이 운영하는 블로그에서 최신 콘텐츠를 즉각 확인해야 할 필요도 없고, 기존에 발행한 글을 다시 수정하는 경우도 거의 없었다.

그래서 스켈레톤 UI를 도입하고, 캐시 방식도 고치기로 했다. 일단은 작업이 쉬운 캐시 방식부터 손봤다.

기존 no-store 방식에서 Posts 리스트와 Posts 상세 모두 캐시 유지 시간을 3600초로 변경했다. 대신, 글을 발행할 때 Next.js 서버의 캐시를 무효화하는 작업을 추가했다. 이러면 글을 발행하거나 발행한 글을 수정하는 순간 Next.js 서버의 캐시가 무효화되어, 기존에 접속해 있던 사람들도 글 목록이나 글 상세를 요청 시 갱신된 결과를 받을 수 있다.

또한 평소에는 누군가 한 번 요청한 결과를 Next.js 서버가 1시간 동안 보관해 두고, 그동안은 API 서버를 다시 호출하지 않고 모든 방문자에게 그 결과를 내려 준다.

그다음으로 스켈레톤 UI 작업을 했다. 스켈레톤 UI는 글 목록과 글 상세에 적용했다. 현재 구조인 제목, 내용, 날짜, 태그 형식으로 컴포넌트를 만들었다.

적용하고 나니, 기존의 로딩 화면과 달리 비어 있는 느낌이 많이 줄어들었다. 여전히 콜드 스타트에서 데이터를 요청할 때는 시간이 오래 걸리지만, 캐시와 스켈레톤 컴포넌트가 그 기다리는 시간을 조금은 덜어 줄 듯 싶다. 추후 여유가 되면 최소 인스턴스를 1개라도 가동하도록 변경해서 해당 부분을 해결해 봐야겠다.