CSR와 SSR이란 무엇이고 차이점은?

서버와 클라이언트에 대한 개념부터 상기해보자.

클라이언트는 서버라는 프로그램에게 서비스를 요청하고, 서버는 그 요청에 대한 응답을 보내주는 역할을 한다.

즉, 클라이언트가 주문을 하면 서버가 요리를 해주는 느낌. 클라이언트와 서버는 정보를 서로 주고 받는다.

 

1. SSR이란

- Server Side Rendering, 서버 쪽에서 렌더링을 위한 모든 준비를 하고나서 클라이언트에 전달

- SSR의 단계

1) 사용자가 웹사이트에 요청을 보내면, 서버는 'ready to render'한 형태로 html 파일을 만들어낸다.

2) 클라이언트에게 html파일이 전달되면 렌더링이 바로 된다. 하지만 javascript가 읽히기 전이기 때문에 조작 등의 기능은 작동하지 않는다.

3) 이후 클라이언트가 javascript를 다운받으면, 그 동안의 사용자는 콘텐츠만 볼 수 있을 뿐 조작은 불가능하다. 이때의 사용자의 조작을 기억해두고 있는다.

4) 브라우저는 javascript 프레임워크를 실행하고, 성공적으로 컴파일 될 시에 위의 사용자 조작이 실행되고 완전한 웹페이지의 동작이 가능해진다.

 

2. CSR이란

- Client Side Rendering, 서버 쪽이 아닌 클라이언트 단에서 렌더링을 위한 준비를 하는 것. 서버는 html과 javascript를 클라이언트에게 보내주고, 클라이언트는 그것을 바탕으로 렌더링한다.

- CSR의 단계

1) 사용자가 웹사이트에 요청을 보내면, CDN(사용자의 요청에 물리적으로 가까운 서버에서 요청하는 식으로 효율적인 방식)이 html과 js로 접근할 수 있는 링크를 클라이언트로 전달한다.

2) 클라이언트가 해당 링크를 다운받고, 다운받을 동안에는 사용자는 아무것도 볼 수 없다. (SSR이 html파일을 볼 수 있었던 것과는 다르게)

3) js의 다운이 완료되면, 데이터를 위한 API가 호출되고, 서버는 API의 요청에 반응하며 이때 API가 받아온 data가 placeholder 자리로 들어오게 된다. 이제 완전한 웹페이지의 동작과 구현이 가능해졌다.

 

3. SSR vs CSR

- 이제 각각의 특징을 알아보았다. 그렇다면 언제, 어떻게, 어떠한 방식으로 구현하는 게 맞는 걸까? (정답은 없다!)

- 위의 질문에 대한 고민을 위해 차이점을 알아보자.

	SSR	CSR
장점	- SEO에 유리 - 첫 화면 로딩이 빠름	- 화면 전환시 빠른 속도 - 서버에 무리가 적음 - 사용자와의 상호작용에 유리
단점	- 사용자와의 상호작용에 불리  -> TTV(time to view)와 TTI(time to interact)간의 시간간격 때문 - 서버에 무리가 갈 수 있음	- 첫 화면 로딩이 느림 - SEO에 불리

 

1) 첫 페이지를 더 먼저? 나머지 페이지를 더 먼저?

- 웹 페이지는 맨 처음의 페이지를 로딩하는 시간과 그 외 나머지 페이지를 로딩하는 시간으로 이루어져있다.

- 이때 첫페이지를 로딩하는 데 걸리는 시간은 SSR가 더 빠르다. CSR는 html, css를 모두 불러오는 반면, SSR은 필요한 부분만 호출하기 때문이다.

- 첫페이지를 로딩했다고 치고, 그렇다면 나머지 페이지를 로딩하는 데 걸리는 시간은 어떻게 다를까. 만약 사용자가 메인 화면에서 글작성이라는 페이지를 들어갔다고 하자. CSR는 해당 글작성 페이지에 대한 html, css파일을 모두 받아온 상태. 반면 SSR은 첫 페이지를 로딩했던 것처럼 또다시 해당 과정을 실행하게 된다. 즉, 나머지 페이지를 로딩할 때는 CSR이 더 빠르다.

 

2) SEO, 크롤러에 유리한 것은 무엇일까? -> SSR

- 검색 엔진인 SEO (Search Engine Optimization)는 크롤러를 이용해 웹사이트의 데이터를 읽는다. CSR은 컨텐츠를 생성할 때에 javascript까지 모두 실행되어야 metadata가 바뀌게 된다. 하지만 SSR은 서버 단에서 javascript까지 처리된 후 클라이언트로 전달되기 때문에 크롤러에 비교적 유리하고 빠르게 대응이 가능하다.

 

3) 서버에 부담을 줄이고 싶다면? -> CSR

- 당연히 SSR은 서버에 요청을 한 뒤 서버 단에서 처리가 모두 이루어지기 때문에 서버에 무리가 더 간다.

 

4) 그래서 언제 무엇을 사용해야하냐?

- SSR은 이럴때 사용한다.

: 네트워크가 느리고(한페이지씩 불러오기 때문에 비교적 유리), SEO가 필요하고, 첫 화면이 빨리 떠야하고, 웹사이트의 상호작용이 별로 없을 때

- CSR은 이럴때 사용한다.

: 네트워크가 빠르고, 서버의 성능이 좋지 않고, 보여줘야하는 데이터가 많고, 메인 스크립트가 가벼우며, 상호작용의 요소가 많을 때

 

 

 

참고 사이트 : https://velog.io/@vagabondms/%EA%B8%B0%EC%88%A0-%EC%8A%A4%ED%84%B0%EB%94%94-SSR%EA%B3%BC-CSR%EC%9D%98-%EC%B0%A8%EC%9D%B4