/article 페이지의 로드가 3초 이상 지연됩니다.

[algoORgoal]

Summary

/article path의 페이지 로드가 간헐적으로 3초~6초 지연됩니다.

Description

AS-IS

• https://kufe-web.vercel.app/article 페이지의 로드가 6초 이상 지연되는 케이스를 확인하였습니다. 수치화시켰을 때는 3초가 나오는데, 체감 상으로 콜드 스타트 최악의 경우 6초 정도가 걸렸습니다.
• 일정 시간 이상 해당 페이지를 접속하지 않다가 페이지를 접근하려고 하였을 때 지연되는 것을 확인하였습니다.
• pagespeed insights를 통하여 모바일 환경에서 2.5초 이상 지연되는 것을 https://pagespeed.web.dev/analysis/https-kufe-web-vercel-app-articles/ht3fr5ed6a?form_factor=mobile에서 확인하였습니다.
• Fast 4G 이상의 환경에서 document를 받는데 ~3s 걸린 것을 확인하였습니다.
  

credited to @Turtle-Hwan

TO-BE

• 좋은 UX를 위하여, /article 페이지의 LCP 시간을 2.5초 이내로 유지합니다.
• /article 페이지의 TTFB를 0.8초 이내로 유지합니다.

Solution

다음과 같이 해결해볼 수 있을 것 같습니다.

• Next.js의 use cache directive를 사용하여, getArticles의 return value를 data cache에 저장한다.
• 캐싱을 통하여 사용자가 cold start time을 느낄 수 없게 합니다.
• 다만, article을 업데이트하는 query가 완료되는 시점까지 업데이트된 article을 받아볼 수는 없습니다. 그런데 데이터의 신선함이 그렇게 중요하지 않기에, stale data여도 괜찮다고 보입니다.
• 하지만 pagination 및 tag로 인하여 getArticles의 내용이 tag 및 pagination 값에 따라 시시각각 변동될 것으로 예상이 됩니다. 따라서, 첫 페이지를 로드시에만 다음과 같은 article 목록을 제공하는 것은 어떨까요?
  • tag 선택 X
  • 맨 처음 페이지

References

• https://nextjs.org/docs/app/api-reference/directives/use-cache#caching-function-output-with-use-cache
• https://web.dev/articles/lcp#:~:text=A%20good%20LCP%20value%20is,Core%20Web%20Vitals%20metrics%20thresholds.
• https://web.dev/articles/ttfb#good-ttfb-score