CSR(Client Side Rendering) vs SSR(Server Side Rendering) vs SSG(Static Site Generation)
브라우저에서 우리가 실제로 보는 화면을 어디서 최종적으로 만들어서 보여주느냐에 따라 CSR과 SSR 로 나뉜다.
차이점으로는 크게 초기 렌더링속도, SEO(검색엔진최적화), 보안으로 볼 수 있다.
| CSR(Client Side Rendering) | SSR(Server Side Rendering) | SSG(Static Site Generation) | |
|---|---|---|---|
| 간단설명 | 완전하게 만들어진 HTML파일을 받아오면 렌더링 | 필요에 따라 데이터를 서버에 요청해서 받아와 렌더링 | 사용자와 상호작용이 없는(js가 없는) 페이지를 정적으로 미리 생성을 해두고 서버에 배포해놓을수가 있음 |
| 상세설명 | Browser가 서버에 HTML과 static파일을 요청한 후 로드되면 사용자의 상호작용에 따라서 javascript를 통해 동적으로 Rendering | 웹서버에 요청할때 마다 Browser 새로고침이 일어나고 서버에 새로운 페이지에 대한 요청 | 정적인 정보를 보여주는 페이지일 때 사용함, 사용자와 상호작용해서 데이터가 변하지 않는 페이지를 서버에서 생성해서 요청에 따라서 재사용 |
| 렌더링주체 | client | server | server |
| 장점 | 서버와 클라이언트간의 데이터 양과 트래픽양이 현저히 감소, 단 한번의 렌더링만 있으므로 페이지 이동이 빠름 | 초기 렌더링이 빠름, 모든 검색엔진에 대한 SEO(검색엔진 최적화)가 가능 | 추가적으로 데이터를 서버에서 받아와야하거나 동적인 데이터가 있다면 JS 파일을 함께 가지고 있을수도 있음 |
| 단점 | SEO 문제발생(HTML파일이 비어있어 검색엔진이 데이터를 수집할 수 없음), 코드 spliting으로 초기 렌더링이 느림(모든 HTML과 static파일이 로드될 때까지 기다려야 함) | 페이지마다 새로고침 (서버에 매번 요청을 하기 때문에 트래픽, 서버 부하) | 페이지수가 적으면 괜찮으나 큰 프로젝트 일 경우 빌드시간이 길어질수 있음 |
| 특징 | TTV(Time to View)+TTI(Time to Interaction) 동시에 이뤄짐 | TTV 먼저 TTI 나중에 | TTV만 이뤄짐 |
| 대표적인 예시 | React.js | Next.js | Gatsby, Next.js(Static Generation를 page 단위로 할 수 있음) |
관련 추가자료
SPA(Single Page Application)
SPA(Single Page Application)은 Client Side Rendering 방식으로 어플리케이션 생명 주기 중에서 단 한 번만 리소스(HTML, CSS, JavaScript) 를 로딩하고, 그 후에는 데이터를 받아올 때만 서버와 통신한다. 정리하자면 첫 요청시 딱 한 페이지만 불러오고 페이지 이동시 기존 페이지의 내부를 수정해서 보여주는 방식이다. 이를 사용자(클라이언트) 관점에서 다시 말하자면 최초 페이지를 로딩한 시점부터는 페이지 리로딩 없이 필요한 부분만 서버로 부터 받아서 화면을 갱신하는 것이다. 필요한 부분만 갱신하기 때문에 네이티브 앱에 가까운 자연스러운 페이지 이동과 사용자 경험(UX)을 제공할 수 있다.
MPA(Multiple Page Application)
MPA는 페이지를 이동할 때마다 새로운 페이지를 요청한다. 모든 탬플릿은 서버 연산을 통해서 렌더링하고 완성된 페이지 형태로 응답한다. 이 과정을 서버사이드 렌더링(SSR)이라고 부른다. MPA 의 경우 브라우저에서 JavaScript 코드가 동작하기 전에도 완성된 형태의 탬플릿(HTML에 데이터가 삽입된 상태)을 서버로 부터 전달받는다. 이 때문에 JavaScript 를 구동하지 않는 모르는 검색 로봇이 페이지를 크롤링하기에 매우매우 적합하다.
Reference
keep it fresh!