피드로 돌아가기
Dev.toFrontend
원문 읽기
SSG/SSR 도입 통한 CSR 대비 초기 로딩 속도 최대 80% 개선
ReactJs Performance ~ Server-Side Rendering (SSR) and Static Generation ~
AI 요약
Context
Client-Side Rendering(CSR) 기반 아키텍처의 JavaScript 실행 지연으로 인한 느린 초기 렌더링 및 SEO 취약성 발생. 특히 콘텐츠 중심 페이지에서 2~4초에 달하는 초기 로드 시간이 사용자 경험의 병목 지점으로 작용.
Technical Solution
- 서버단 사전 렌더링을 통한 HTML 즉시 제공으로 First Visual Display 시간 단축
- 빌드 시점에 정적 HTML을 생성하는 SSG 적용 및 CDN 배포를 통한 응답 속도 최적화
revalidate옵션을 활용한 ISR 구현으로 정적 페이지의 속도와 동적 데이터 업데이트의 유연성 동시 확보- 요청 시점에 HTML을 생성하는 SSR 도입을 통한 실시간성 데이터 반영 및 SEO 성능 강화
- Hydration 과정을 통한 정적 HTML의 인터랙티브 기능 활성화 설계
- React Compiler 및 Code Splitting을 병행하여 JavaScript 번들 크기 감소 및 실행 효율 최적화
실천 포인트
1. 데이터 변경 빈도가 낮은 랜딩 페이지는 SSG 우선 적용
2. 주기적 업데이트가 필요한 콘텐츠는 ISR의 revalidate 주기 설정 검토
3. 사용자별 맞춤 데이터나 실시간 정보가 필수적인 페이지는 SSR 채택
4. React 19+ 환경인 경우 React Compiler 도입을 통한 자동 Memoization 적용