SSR(Server-side-rendering) & CSR(Client-side-rendering)

렌더링이란?

웹페이지 접속시, 그 페이지를 브라우저에 그려주는 것.

SPA(Single Page Application)란?

생긴 이유?

모바일의 시대가 도래하면서, 모바일은 데스크탑에 비해 성능이 낮고 유저의 모바일 웹에서의 동작 및 요청이 많아 웹페이지를 기존에 방식과 다르게 렌더링할 필요가 느껴지면서 등장한 클라이언트 사이드 렌더링 Single Page Application(SPA)

어떤게 있는가?

우리가 아는 React, Angular 등 대부분의 자바스크립트 프레임워크를 말한다.

특징과 차이

SSR(Server-side-rendering)

전통적인 웹 방식. 즉, 브라우저에 나타나는 형태 그대로를 HTML로 만들어 제공하고, 브라우저는 HTML을 표시하는 방식

장점

• 검색엔진최적화(SEO)에 문제없음
• 초기 구동속도가 더 빠름

단점

• 새로고침처럼 매번 전체페이지를 랜더링하는 방식으로 필요없는 부분을 포함하여 전체페이지를 갱신하므로 비효율적인 부분이 있음

CSR(Client-side-rendering)

클라이언트측에서 자바스크립트가 html을 그리는 역할을 함

장점

• 사용자의 행동에 따라 필요한 부분만 다시 읽어들이기 때문에 서버 측에서 렌더링하여 전체 페이지를 다시 읽어들이는 것보다 빠른 인터렉션을 기대할 수 있다

단점

• 페이지를 읽고, 자바스크립트 읽고 화면그리고 하는 시간때문에 정작 사용자에게는 초기구동 속도가 느려보일 수 있음 (그래서 로딩바같은 것들이 많이 나오기 시작한 것 같다는 생각이 듦)
• 검색엔진최적화(SEO)에 문제가 존재함(동일한 url에 컨텐츠만 바뀌기때문....! React의 Helmet기능같은 것이 필요해짐)

참고자료 : [주니어탈출기] 서버사이드렌더링(SSR) & 클라이언트사이드렌더링(CSR)
서버 사이드 렌더링 그리고 클라이언트 사이드 렌더링