[WEB] SSR vs CSR (ft. 유행은 돌고 돈다)

웹 개발의 변화

• jsp의 경우 SSR 방식 (서버에서 html 만들어 보냄)
  • React의 경우 CSR 방식 (브라우저에서 JS로 화면 그림)
    • Next의 경우 SSR 방식 (서버에서 html 만들어 보냄)

??

SSR(Server Side Rendering) 이란 ?

• 서버에서 HTML 을 만들어서 클라이언트에게 보내는 방식
• 첫 로딩이 빠름
• SEO에 유리 (검색 크롤링)
• 페이지 바뀔때마다 새로고침 필요
• 서버 부하
  (예시 : PHP , JSP , Next.js)

CSR(Client Side Rendering) 이란 ?

• 빈 HTML 에 JS 가 DOM 을 만드는 형식
• 사용자 경험 중심
• SPA 처럼 화면 전환이 자연스러움
• 초기 로딩 느림
• SEO 불리 (크롤링에서 불리)
  (예시 : React , Vue , Angular)

서로가 불리한 부분이 존재하는 이유

• 초기 로딩 : React 초기에 배우는 내용 실제 화면은 하나지만 안에 내용만 바꿔치기 한다 배우는 걸 생각하면 된다 (즉, 처음에 다 가져와야함) SSR 을 채용하면 한번에 하나 화면만 가져오면 되기 때문에 상대적으로 초기 로딩이 빠름
  
  
• SEO : 화면을 이미 html 로 보내는게 아닌 바꿔치기 형식이기 때문에 검색어 키워드 잡기가 어려움
  
  
• 페이지 바뀔때마다 새로고침 필요 : SSR은 한번에 하나의 화면만 전송하기 때문에 새로고침 발생 -> 부자연스러워 보임
  
  
• 서버 부하 : react 는 처음에 다 들고 오니 추가적으로 리소스가 필요 없으나 SSR은 한번에 하나의 화면을 불러오기 떄문에 자주 화면을 넘기면 부하가 생김

다시 SSR 이 언급되는 이유

• SEO 중요도 중시
• 초기 화면 로딩 속도

JSP vs Next.js

• 둘 다 SSR 방식은 맞음
• 단, Next의 경우 React의 프레임워크 즉, CSR + SSR 개념으로 동작한다

항목	JSP	Next.js
기술 스택	Java 기반	React 기반
렌더링	서버에서 HTML 생성	서버 + 클라이언트 조합
사용성	무겁고 정적인 방식	동적, 유연함 (Hybrid)
SEO	강점	강점 + 퍼포먼스 조율 가능