본문 바로가기
카테고리 없음

CSR & SSR

by 찬찬2 2022. 11. 22.

Web Trends

 

웹 트렌드는 문제점을 해결하는 것에 중점을 두면서 새롭게 변화하고 발전해왔다.

 

■ Static Sites (mid 1990s)

 

 

- 클라이언트가 브라우저에서 URL 주소로 접속하면, 서버에 이미 배포되어 있는  HTML문서를 브라우저에서 보여주는 형식이다.

- 문제점: 페이지 내에서 다른 링크를 클릭하면 브라우저는 다시 서버에서 HTML문서를 받아와 보여주기 때문에 페이지 전체가 업데이트된다.

 


 

■ iframe (1996)

- 페이지 내부에서 부분적으로 HTML문서를 받아와서 업데이트할 수 있게되었다.

 


 

■ XMLHttpRequest(1998~)

 

 

-  HTML문서 전체가 아니라 JSON과 같은 포맷으로 서버에서 가볍게 필요한 데이터만 받아올 수 있게 되었다. 그리고 그 데이터를 자바스크립트를 통해서 HTML요소를 동적으로 생성해서 페이지에 업데이트하는 방식으로 발전되었다.

 


 

■ SPA(Single Page Application) -  AJAX(2005)

- XMLHttpRequest를 이용해 부분적으로 HTML 요소를 부분적으로 렌더링하는 방식이 공식적인 AJAX이름을 가지게 되면서 SPA가 탄생하게 되었다.

 


 

■ CSR(Client Side Rendering)

- 사용자들의 PC성능이 좋아지면서 많은 것들을 무리 없이 처리하게 되었고, 자바스크립트도 표준화가 잘되어짐에 따라 강력한 커뮤니티를 바탕으로 앵귤러, 뷰, 리액트와 같은 라이브러리가 나오면서 CSR 시대가 시작되었다.

 

- 서버에서 클라이언트에게 index라는 HTML 파일을 전달해주는데 이때 HTML문서를 살펴보면 body태그 안에 id="root"라는 태그와 어플리케이션에서 필요한 자바스크립트를 연결해주는 링크로 간단하게 구성되어 있다. HTML은 텅텅 비어져 있기 때문에 클라이언트가 처음에 접속하면 빈 화면만 보이다가 자바스크립트 파일을 다 받은 뒤 비로소 브라우저에 웹 페이지가 보이게된다. (TTV & TTI 동시)

 

 

- 클라이언트에게 어플리케이션을 구동시키기 위한 모든 장비들을 제공하는 방식을 CSR이라고 할 수 있다.

TTV와 TTI가 동시에 가능하다.

 

장점:

1. 서버에서 빈 뼈대 HTML만 받아오기 때문에 서버 부하가 적다.

2. 연산, 라우팅을 모두 클라이언트 측에서 직접 처리하기 때문에 반응 속도가 우수하다.

 

단점: 

1. 초기 로딩 속도가 느리다. (사용자가 첫 화면을 보기 까지 시간이 오래걸릴 수 있다. 자바스크립트까지 모두 다운받은 뒤 구동속도는 빠르다.)

2. 검색엔진(SEO)에 최적화되어 있지 않다. (브라우저들이 가지고 있는 크롤러들은 HTML을 읽어서 검색 가능한 색인을 만들어 내는데, 웹 크롤러 봇의 입장에서 보는 CSR은 HTML이 텅텅 비어있다.)

 

단점에 대한 보안방법?

1. 초기 로딩속도

- code splitting, tree-shaking, chunk 분리

※ 자바스크립트 번들 크기를 줄여 초기 DOM 생성속도를 줄이면 어느정도 보안될 수 있다.

 

2. SEO 최적화

- pre-rendering

라이브러리, 웹팩 플러그인을 통해 각 페이지에 대한 HTML문서를 미리 생성해둔 뒤 서버에서 요청하는 자가 만약 크롤러일 경우 미리 생성한 HTML문서를 보여줌으로써 개선할 수 있다.

 

- CSR에 SSR/SSG를 도입한다.

※ 리액트의 경우 NEXT.js 또는 Gatsby.js를 혼합해 사용하는 방법.

 


 

■ SSR(Server Side Rendering)

- 웹 사이트에 접속하면 서버에서 모든 데이터를 가져온 뒤 HTML 문서를 만들게 되고 동적으로 조금 제어할 수 있는 소스코드와 함께 클라이언트에게 보내주어 화면에 보이게된다. 즉, 서버측에서 클라이언트에게 보여줄 웹 페이지를 미리 만들어 클라이언트 화면에 보여주는 방식이다.

 

TTV 다음 자바스크립트를 다운 받고 TTI가 가능하다.

 

장점:

1. CSR 보다 비교적으로 첫 화면을 보기 까지 시간이 적게 걸린다.

2. 모든 컨텐츠가 모두 HTML에 담겨져 있기 때문에 효율적인 SEO에 최적화되어 있다.

 

단점:

1. 게시글 제일 처음 설명한 Static Site와 같이 깜빡거리는 현상이 있다. (사용자가 클릭을 하면 전체적인 웹사이트를 다시 서버에서 받아오기 때문에)

2. 사용자가 많은 서비스일 수록 서버에 과부하가 걸릴 수 있다.

3. 사용자가 첫 화면을 빠르게 볼 수 있지만, 동적으로 데이터를 처리하는 자바스크립트를 다운받지 못해 사용자가 이벤트를 발생시켰을때 작동하지 않을 수 있다. (TTV → TTI)

 

- 이러한 단점을 극복하기 위해 리액트와 같은 CSR 라이브러리와 NEXT.js를 혼합해 사용해 목적에 맞게끔 유연하게 작업할 수 있다.

 

 

 

 


 

■ SSG(Static Site Generation)

 

 

https://youtu.be/iZ9csAfU5Os

https://youtu.be/YuqB8D6eCKE

 

댓글