React 성능 개선: 이미지 최적화 전후 LCP 비교
·
Tech Sharing
💡 Reser-On-Do 프로젝트에서의 성능 개선의 필요성이번 Reser-On-Do 프로젝트는 Next.js 대신 React CSR(Client-Side Rendering) 방식으로 개발했습니다. CSR은 다음과 같은 이유로 SSR(Server-Side Rendering) 방식보다 초기 로딩 속도가 느릴 수 있습니다.HTML에 데이터가 즉시 포함되지 않음. ➡️ 브라우저가 JS를 모두 다운받고 실행해야 화면이 그려짐초기 렌더링 전까지 빈 화면(또는 로딩 화면)을 보여줄 가능성이 높음즉, CSR에서는 초기 구동 단계에서 JS 다운로드·파싱·실행까지 모두 끝나야 메인 콘텐츠가 나타나기 때문에, 첫 화면 로딩 속도가 특히 중요합니다.그중에서도 사용자가 처음 접속하는 메인 페이지의 성능은 서비스 전체의 첫인상..