tanstack-query2 Next.js 14 SSR, Tanstack Query prefetchQuery 활용법 With LCP 단축으로 웹 성능 개선 기존 아트인포 는 CSR Suspense 방식으로 메인페이지가 구현되어 있었다.성능 측정을 하였을때 LCP에서 아쉬운 결과가 나왔다.Largest Contentful Paint(LCP)란?LCP는 뷰포트 내에서 가장 큰 콘텐츠 요소의 로드 시간을 측정하는 성능 지표로, 페이지가 사용자에게 시각적으로 준비되기까지 걸리는 시간을 나타냅니다. 이는 빠르고 매력적인 사용자 경험을 만드는 데 중요한 요소입니다. 출처: https://web.dev/articles/optimize-lcp?hl=ko 최대 콘텐츠 렌더링 시간 최적화 | Articles | web.devLCP 분석 및 개선이 필요한 주요 영역을 파악하는 방법에 관한 단계별 안내web.dev 아트인포 특성상 이미지 위주의 컨텐츠로 이미지 포멧변환.. 2024. 7. 24. [React] Tanstack query 키 관리하기 in QueryKey-Factory 이번엔 아트인포 에서 Next.js와 Tanstack Query를 사용하며 키 관리를 어떻게 했는지 정리해봤습니다. 키 관리가 필요한 이유..?Tanstack-Query가 제공하는 기능들을 제대로 사용하기 위해서는 필수적으로 이해해야 하는 개념들이 몇 가지 존재합니다. 오늘 다뤄볼 주제는 그 핵심 개념들 중 하나인 Query Keys를 관리하는 방법. 공식문서에서는 다음과 같이 Query Keys를 소개한다. At its core, TanStack Query manages query caching for you based on query keys. Query keys have to be an Array at the top level, and can be as simple as an Array with a.. 2024. 7. 18. 이전 1 다음
