[WEB] 렌더링 방식 CSR과 SSR

---

서론

브라우저의 동작 원리

브라우저 엔진은 HTML 구문을 해석해 DOM 트리를 구성하고, CSS 소스를 추출하여 CSSOM이라는 스타일링 객체를 구성한다.

[WEB] 브라우저의 동작

 

여기서 HTML 구문은 웹 서버가 전부 다 만들 수도 있고, 웹 서버로부터 초기 HTML을 받은 후에 브라우저가 동적으로 생성해 붙일 수도 있다. 전자를 SSR(Server Side Rendering), 후자를 CSR(Client Side Rendering)이라 한다.

이 외에도 SSG, prerendering, lazy loading 등 다양한 렌더링 방식이 존재하고, 서비스의 특징과 요구에 따라 렌더링 방식이 선택된다.

그중 주요 렌더링 방식인 CSR과 SSR에 대해서 알아보자

 

---

SPA와 MPA

SPA(Single Page Application)

하나의 페이지로 이루어진 홈페이지로 CSR에 적합하다.

최초에 서버에서 전송받은 하나의 HTML을 이용해 데이터만 변경해서 렌더링 한다.

데이터를 수정, 조회할 때 동적으로 페이지를 구성하여 페이지가 새로고침 되거나 다른 페이지로 넘어가지 않는다.

Vue, Angular, React 프레임워크로 만든 홈페이지들이 대부분 여기에 속한다. 만약 PHP나 JAVA로 정적인 페이지 하나만 구성된 홈페이지라면, 그것 또한 SPA로 분류한다.

MPA(Multiple Page Application)

여러 개의 페이지로 이루어진 홈페이지로 PHP나 JAVA가 여기에 속한다.

여러 페이지로 구성되어 있으므로 보통 클라이언트에서 서버에 요청을 보내면 서버에서 렌더링 하고 클라이언트에게 응답을 주는 방식인 SSR 환경을 사용한다.

페이지의 이동마다 새로고침이 발생한다는 특징이 있다.

---

CSR과 SSR

CSR(Client Side Rendering)

페이지에서 필요한 주요 내용들을 동적으로 생성하는 방식

최초 로드 시 빈 HTML과 정적 자원(CSS, js, 이미지 리소스 등)을 다운로드한다. 이후 JavaScript를 이용하여 DOM을 동적으로 생성하며 그려낸다. 이를 ‘Hydration’이라고 한다.

SPA에 적합한 환경이다.

장점

• 필요한 데이터만 업데이트되기 때문에 트래픽 감소
• 새로고침이 발생하지 않아 네이티브 앱과 같은 경험을 할 수 있어 사용자 경험 상승

단점

• SEO에 취약하다. HTML 파일을 하나만 받아와서 작동하기 때문에 각각의 페이지에 대한 정보를 담기 힘들다.
• 첫 로드 시 모든 로직이 담긴 JavaScript를 다운로드하여야 해서 로딩 속도가 길다.

---

SSR(Server Side Rendering)

클라이언트에서 요청할 때마다 각 상황에 맞는 HTML 파일을 넘겨준다.

이후 CSR과 동일하게 HTML을 해석하여 DOM을 생성하고 Hydration을 수행한다.

MPA 구동 방식과 밀접한 관계가 있다.

장점

• 첫 렌더링 된 HTML을 클라이언트에서 전달해 주기 때문에 초기 로딩 성능이 좋다.
• 검색엔진 최적화

단점

• 페이지 이동 시 새로운 HTML 파일을 받아오기 때문에 화면 깜박임 현상이 있다. 사용자 경험이 좋지 않다.
  • 또한 페이지 이동이 많아질수록 서버 부하가 커진다.
• 초기 진입은 빠르지만, 페이지 이동은 느린 편이다.

---

참고

YOUTUBE: 10분 테코톡: 신세한탄의 CSR&SSR

pxd story: CSR과 SSR의 차이점

요즘 IT: SSR 시작하기 전 알아야 할 것들(feat. CSR)

 

---