SSR (Server Side Rendering) 과 CSR (Client Side Rendering) 의 차이점

 

SSR

옛날 전통 웹 방식은 MPA 였다.

MPA라는 용어도 사실 SPA가 유행하면서 비교를 위해 나왔듯이

SPA 나오기 전에는 모두 MPA 형태였다.

 

MPA는 새로운 페이지를 요청을 보내면,

모든 탬플릿을 서버연산을 통해 렌더링하고 완성된 페이지형태로  응답한다.

 

SPA 와 MPA의 차이점  참고링크

https://sg-coding.tistory.com/entry/SPA-Single-Page-Application-%EC%99%80-MPA-Multi-Page-Application-%EC%B0%A8%EC%9D%B4%EC%A0%90

 

SSR 의 장점는 SEO (검색엔진최적화) 이다.

전통적인 MPA 는 javascript 가 동작하기 전에도 HTML 에 데이터가 삽입된 상태 ,

즉 완성된 형태의 탬플릿를 서버로부터 전달 받기 때문에 검색엔진이 크롤링하기에 좋다.

 

 

CSR 

SSR과 다르게 클라이언트 쪽에서 렌더링이 일어난다.

최초에 한번 서버에서 전체 페이지를 로딩하여 보여주고 이후에는 사용자의 요청이 올 때마다,

리소스를 서버에서 제공한 후 클라이언트가 해석하고 렌더링하는 방식이다.

반대로 SEO 은 어렵다.

 

 

SSR vs CSR

 

- 로딩 시간

1. 첫 페이지 로딩

CSR 은 HTML , CSS , SCRITP 를 한번에 불러온다.

SSR 은 필요한 부분의 HTML과 SCRIPT 만 불러오게된다.

SSR 승

 

2. 첫 페이지 로딩 후 다른 페이지

첫페이지가 로딩되고나서 다른 곳으로 이동할 때는

CSR 은 이미 첫 페이지 로딩할때 코드를 받아놔서 속도가 빠르다

SSR 은 첫페이지 로딩할때의 과정을 다시 실행한다. 

CSR 승

 

학교에서 잘못을 해서 선생님한테 매를 맞아야한다.

선생님이 말했다.

"그냥 처음에 쎄게 한대 야무지게 맞고 끝날래?" (CSR)

"아니면 정타로 맞을래? 대신 몇대인지는 몰라~" (SSR) 

 

그래서 서버자원사용은 SSR 이 사용할 수록 더 많이 잡아먹는다.

 

SEO (검색엔진 최적화) 는

위에 말했듯이 SSR 승 이다.

 

 

뭘 써야해?

SSR

네트워크가 느리거나, SEO 가 필요할때,

최초 로딩이 빨라야하고, 메인 스크립트가 커서 로딩이 느릴때

 

CSR 

네트워크가 빠르거나, SEO 필요없을때,

메인스크립트가 가벼울 때

웹과 사용자간의 상호작용이 많아서 최적의 사용자 ux 제공하고 싶을때