CSR/SSR

클라이언트 사이드 렌더링 (CSR)

• 정의: CSR은 HTML, CSS, JavaScript 등이 클라이언트(브라우저)에서 처리되어 페이지가 렌더링되는 방식
• 장점: 
  • 초기 렌더링 이후에 진행되는 렌더링의 경우 로딩 속도가 훨씬 빠름
  • 페이지 이동 시 페이지 전체를 렌더링 할 필요 없이, 동적으로 일부분만 변경
• 단점:
  • 초기 로딩 시 모든 정적 자원을 한 번에 불러와야 하므로 로딩 시간이 길어질 수 있음
  • 검색 엔진 최적화(SEO)에 불리 (검색 엔진이 처음 페이지를 방문할 경우 HTML이 빈 경우)
  • 클라이언트의 PC 성능에 따라 렌더링 속도의 편차가 있을 수 있음

서버 사이드 렌더링 (SSR)

• 정의: SSR은 서버에서 HTML, CSS 및 JavaScript를 렌더링하여 클라이언트에 전달하는 방식
• 장점:
  • 초기 페이지 로딩 속도가 빠름
  • 검색 엔진 최적화(SEO)에 유리
  • 클라이언트의 PC 성능에 따라 렌더링 속도의 편차 적음
• 단점:
  • 각 페이지 요청마다 서버에서 페이지를 새로 렌더링해야 하므로 서버 부하가 증가
  • 프론트 서버를 따로 돌려야 하므로 CDN 등 사용 불가