기술면접 준비

1. CSR vs SSR

 

원래 MPA로 개발 되었는데 페이지로 이동할때마다 새로고침이 되는 현상 발생

-> ajax 필요한 부분만 리로드할 수 있게 해줌

-> SPA단일 페이지로 이루어져 있어 갱신될 부분에 대해서만 데이터를 요청 (새로고침 발생하지 않아서 사용자 경험에 좋다)

 

왜 갑자기 CSR이랑 SSR 비교인데 MPA와 SPA를 비교하고 있을까?

MPA -> SSR방식 채택

SPA -> CSR방식 채택

하고있기 때문이다.

 

- 첫 페이지 로딩시간

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

SSR은 필요한 부분의 HTML 스크립트만 불러온다.

-> 첫 페이지는 SSR이 더 빠름

 

- 나머지 로딩 시간

CSR은 다 가져왔기 때문에 더 빠름

SSR은 또 첫페이지와 같은 과정을 거쳐서 느림

 

CSR 장점 :

 - 화면 깜빡임 없어서 사용자 경험 UP

 - 초기 로딩 이후 속도가 빠름

 

CSR 단점 :

 - 초기 구동 속도 느림

 - SEO가 어려움

 

SSR 장점 :

 - 초기 로딩 속도 빠름

 - SEO가 쉬움

 

SSR 단점:

 - 페이지 요청마다 새로고침으로 인해 사용자 경험 저하

 - 매번 요청 보내기 때문에 서버 과부하될 수 있음

 

결론

사내에서만 쓰는 서비스 -> SEO가 필요없기 때문에 CSR

이커머스와 같은 검색 유입이 중요한 경우, 초기 로딩이 중요한 경우 -> SSR

 

근데 초기 렌더링은 SSR로 하고 다른페이지 이동시 CSR로 하는 경우도 있음

 

이걸 할 수 있는 라이브러리 & 프레임워크 ->

 

REACT -> Next.js

Vue -> NUXT

Angular -> Universal