SSR과 CSR

✅ 렌더링(Rendering)이란?

렌더링이란 "코드(HTML, CSS, JS)를 브라우저가 해석해서 실제 사용자 눈에 보이는 '화면'으로 그려주는 과정"입니다.

 

✅ 1. SSR (Server Side Rendering: 서버사이드 렌더링)

- HTML을 서버에서 렌더링해서 클라이언트(브라우저)에 전달(=완성본을 만들어 전달)

- 완성된 HTML을 먼저 브라우저에 전송하고, 그 다음 JS 파일들을 다운로드에서 실행

장점 

• 초반 로딩 속도가 빠름(HTML이 미리 준비되어 있어 바로 표시 가능
• SEO(검색엔진최적화)에 유리

단점

• 사용자와 상호작용 시 페이지 새로고침 필요
• 서버에 부하가 큼

jsp, thymeleaf 등이 있다.

 

✅ 2. CSR (Client Side Rendering: 클라이언트사이드 렌더링)

- HTML의 뼈대(<div id ="app"></div>)만 받고, JS로 동적으로 페이지를 구성

- HTML의 뼈대와 JS파일을 거의 동시에 받음

장점 

• 사용자와 상호작용이 빠르고 부드러움
• 서버 부담이 줄어듦

단점

• 초기 로딩 시간이 길 수 있음(JS로딩 후 렌더링)
• SEO에 불리(HTML 내용이 비어 있어서 크롤러가 정보 수집 어려움)

React, Vue.js등이 있다.