[CSR && SSR]SPA와 CSR, SSR

https://miro.medium.com/max/1200/1*7fXfXk2_d5t3_NHUMP-ZmQ.jpeg

 

오늘은 핫한 SPA의 원리인 SSR(Server Side Rendering) 과 CSR(Client Side Rendering) 에 대해서 공부하겠습니다.

 

! Rendering이란?

서버로 부터 받은 HTML 의 정보를 받아 우리가 지금 보는 화면에 보여지는 과정입니다.

 

 

그렇다면 CSR과 SSR의 차이를 알아보겠습니다.

---

■ Server Side Rendering 

서버 사이드 랜더링은 말 그대로 어떠한 요청 시마다 서버(프론트엔드가 돌아가고있는 환경)에서 자원을 가져와 랜더링을 해주는 것입니다.

 

■ Clinet Side Rendering 

클라이언트 사이드 랜더링은 최초 로드시 필요한 파일들을 모두 받고 사용자의 인터랙션에 따라 클라이언트단에서 받아와 랜더링을 해주는 것입니다.

 

 

 

 

! SSR vs CSR 의 장단점

①SSR의 장단점

    -맨 처음 화면의 로드시간이 짧다(첫 랜더링의 속도가 빠르다)

    -검색 엔진 최적화(SEO)에 적합하다. (완성된 HTML파일을 받아 데이터를 갖고 있기 때문! 이 부분은 나중에 따로 다       뤄보도록 하겠습니다.)

    -이후의 랜더링은 서버를 거쳐야 하므로 속도가 느릴 수 있다. (깜빡이는 화면 발생)

 

②CSR의 장단점

    -가장 중요한 랜더링속도! 가 빠르다.(깜빡거림이 없다, 필요한 부분만 가져오면 되기 때문)

    -위의 이유로 모바일 앱에서도 속도가 빠르다.

    -맨 처음 화면의 랜더링속도가 느리다.(페이지,JS를 읽고 화면에 그려야 보여지기에)

 

 

 

 

 

! 그렇다면 SPA == CSR ?  No!!

SPA는 Single Page Application입니다. ( ↔ MPA, Multi Page Application )

말 그대로 하나의 페이지에서 실행된다는 뜻입니다.

맨 처음 화면을 다 받아오고 이후에는 받아오지 않는데도 데이터의 수정,조회가 가능하고 싶어서 CSR이란 기술을 선택 한 것입니다.

 

따라서 둘은 비교의 대상이 아니다.

 

 

React는 이러한 SPA를 쉽게 만들수 있는 UI라이브러리이다.

react-router를 이용한 SPA를 만들 수 있다.

 

 

React == SPA ? 

React == CSR ? 

이에 대한 글은 다음 번에 ^_^

 

 

 

! SSR과 CSR은 어떻게 구분하나요?

간단하게는 개발자도구(F12)를 통해 확인 가능하다.

SSR이라면 여기에 완성형 또는 HTML이 보인다.

그렇지 않다면 (CSR)

처럼 뜰 것이다!