로딩최적화 썸네일형 리스트형 서버컴포넌트와 클라이언트 컴포넌트 분리를 통해 성능 최적화 (with.Next.js) 문제발견로딩페이지의 LCP 최대 콘텐츠 페인트 속도가 약 5초로 Core Web Vitals 기준 Poor(매우구림) 수준이었다.또한 로딩 프로그래스바가 없어서, 리프레쉬토큰을 재발급 할 때, 사용자가 알 지 못한다.개선 목표로딩속도를 최적화 하기위해, 메인페이지(클라이언트 컴포넌트)를 서버컴포넌트와 클라이언트 컴포넌트로 분리하자!!로딩프로그래스 바를 추가하여 CLS (누적 레이아웃 시프트)를 최소화하자!메인 페이지SSR로 페칭하는 부분이 있음,페칭하고 전역상태로 저장하는 부분이 있음이를 분리 할 수는 없을까?이유 : fetching데이터를 외부에서 가져오고, useEffect로 client상태는 분리하자.결과 기존코드 //[channelID]/[sessionCode]/page.tsx const r.. 더보기 이전 1 다음
