🥑 갤러리 페이지에 다량의 조회가 발생할 때, Next.js를 활용한 SSR과 CSR의 이미지 렌더링 속도 비교 및 최적화 전략 연구

[moolmin]

🥑주제 선정 이유

저희 서비스 (4Q)에 갤러리 섹션이 있습니다. 갤러리에서 여러장의 사진을 렌더링할때 SSR과 CSR에서 이미지 렌더링할때 소요되는 시간을 비교해보려고 합니다.

🥑시나리오

아래와 같은 갤러리 페이지를 렌더링할때, CSR과 SSR방식으로 각각 렌더링 해보고 각각 로딩까지 걸리는데 시간이 얼마나 걸리는지 비교합니다. 그리고 로딩 시간을 더 줄일 수 있는 시도를 합니다.

🥑목차 (예정)

1. 이론적 배경

• SSR vs CSR
• 이미지 렌더링 이론

2. 방법론

• 테스트 설계
  a. 서버 및 클라이언트 환경 설정
  b. 동일한 갤러리 페이지를 SSR과 CSR 방식으로 구현하기

• 성능 측정 도구
  a. Lighthouse
  b. Web Vitals

*이미지 최적화 방법
a. 이미지 크기 조정
b. 포맷 변경
c. Lazy Loading, CDN 활용

3. 결과 분석

• SSR vs CSR 성능 비교
  a. 페이지 로딩 시간
  b. 사용자 인터랙션
  c. 서버 부하
• 이미지 최적화 후 성능 분석
  a. next/image 컴포넌트 사용/비사용 결과 분석

[startupcodekr]

"갤러리(이미지) 페이지에 다량의 조회가 발생할 때, Next.js를 활용한 SSR과 CSR의 이미지 렌더링 속도 비교 및 최적화 전략 연구"