[TIL] SSR & CSR (서버 사이드 렌더링 & 클라이언트 사이드 렌더링)

Javascritp logo

◎ 아직까지도 헷갈리는 개념!!

서버 사이드 렌더링과 클라이언트 사이드 렌더링의 개념과 지식에 대해 알아보자.

1. 렌더링

◎ 렌더링이란, 요청받은 내용을 브라우저에 화면에 표시하는 것이다.

예를 들어, 우리가 어떠한 홈페이지를 접속하게 되면 브라우저에 해당하는 홈페이지가 나오는 것이라고 생각하면 된다.

1-1. 렌더링의 과정

• 로더(Loader)가 서버로부터 정보들을 불러옴

• 파싱(Phasing)을 통해 문서를 DOM 트리로 만듦

• DOM 트리가 구축되는 동안 브라우저는 렌더 트리를 구축

• CSS 설정/레이아웃 위치 지정

• 렌더링 트리가 그려짐

2. 서버 사이드 렌더링(SSR)

◎ 웹의 시작부터 MPA(Multiple Page Application)이 있었다. 웹의 초기부터 SPA에 대한 개념이 나오기 전까지 전통적인 웹사이트들은 모두 MAP 형태로 서비스해 왔다.

SSR은 페이지를 이동할 때마다 새로운 페이지를 요청한다. 모든 탬플릿은 서버 연산을 통해서 렌더링하고 완성된 페이지 형태로 응답한다.

 

SSR 

2-1. 서버 사이드 렌더링(SSR)의 장/단점

◎ 이제 SSR의 장/단점을 알아보자.

▶ 장점

+ 초기 페이지의 컨텐츠는 서버 사이드에서 생성하므로 SEO(Search Engine Optimization), 크롤링하기에 매우 적합하다.

 

Javascript가 동작하기 전에도 완성된 형태의 템플릿(HTML에 데이터가 삽입된 상태)을 서버로부터 전달받기 때문에, Javascript를 구동하지 않는 모르는 검색 로봇이 페이지를 크롤링하기에 매우 적합하게 해 준다.

▷ 단점

- 페이지 이동시 화면이 깜빡거리는 증상을 볼 수 있다.

- 페이지 이동시 불필요한 템플릿도 중복해서 로딩한다. 

- 서버 렌더링에 따른 부하가 발생한다. 

- 모바일 앱 개발 시 추가적인 백엔드 작업이 필요하다.

- 개발/배포 환경이 기존 CSR 방식보다 까다로울 수 있다.

 

단점으로는 매 페이지 요청마다 페이지 리로딩(새로고침)이 발생하며, SPA와는 정반대로 서버의 response에 의존해서 페이지를 이동해야 하기 때문에 퍼포먼스, 사용자 경험(UX) 측면에서 SPA에 비해 떨어진다고 볼 수 있다.

3. 클라이언트 사이드 렌더링(CSR)

◎ 클라이언트에서 Javascript를 통해 렌더링 하는 방식이다.

첫 요청 시 딱 한 페이지만 불러오고 페이지 이동시 기존 페이지의 내부를 수정해서 보여주는 방식이다.

클라이언트 관점에서 말하면 최초 페이지를 로딩한 시점부터는 페이지 리로딩 없이 필요한 부분만 서버로부터 받아서 화면을 갱신하는 것이다. 필요한 부분만 갱신하기 때문에 네이티브 앱에 가까운 자연스러운 페이지 이동을 제공할 수 있다.

SPA(Single Page Application) 형식의 대부분 프론트엔드 라이브러리(React, Vue 등)가 CSR 방식으로 시작되었다.

그리고 초기 렌더링 시간 비용 문제, SEO 문제, 메타 데이터 동적 생성의 한계를 극복하기 위해

SSR 프레임워크(React - Next.js, Vue - Nuxt.js)를 보유하고 있다.

 

SPA

 

2-1. 클라이 언트 사이드 렌더링(CSR)의 장/단점 (SPA의 장/단점)

◎ 이제 CSR의 장/단점을 알아보자.

▶ 장점

+ 자연스러운 사용자 경험

+ 필요한 리소스만 부분적으로 로딩

+ 서버의 템플릿 연산을 클라이언트로 분산

+ 컴포넌트별 개발 용이

▷ 단점

- Javascript 파일을 번들링 해서 한 번에 받기 때문에 초기 구동 속도가 느리고 초기 로딩 비용이 있음(webpack의 code splitting으로 해결)

- 검색엔진 최적화(SEO)가 어려움

- 보안 이슈(프론트엔드에 비즈니스 로직 최소화)

 

※ 참조

https://asfirstalways.tistory.com/244

서버 사이드 렌더링 그리고 클라이언트 사이드 렌더링

https://yunzema.tistory.com/103

SSR & CSR (서버 사이드 렌더링 & 클라이언트 사이드 렌더링), Nuxt