결론부터..
결국 어느 쪽에서 Rendering을 준비하느냐?
SPA와 MPA
CSR와 SSR를 설명하기 위해서 SPA와 MPA를 먼저 언급하여야 좋을 것 같다.
MPA
- Multi Page Application의 약자
- 페이지 변경을 요청 > 전체 페이지를 새롭게 렌더링하여 받음
SPA
- Single Page Application의 약자
- 페이지 변경을 요청 > 원하는 부분만 응답 받아 부분을 렌더링하여 받음
정리를 하자면 SPA와 MPA의 차이는 전체를 응답으로 받아서 렌더링을 하냐? 부분만 따로 응답을 받아서 렌더링을 하냐? 이 차이라고 할 수 있다.
SPA와 MPA / CSR과 SSR는 서로 무슨 관계일까?
공부를 하기 전까지는 서로 통용해서 쓸 수 있는 말이라고 생각했고, 크게 구분지으면서 사용했던 용어는 아니었다.
-
차이점
- SPA, MPA > 페이지 구성 방식 / SSR, CSR > 렌더링 방식
-
관계점
- SPA는 변경이 필요한 경우 그 부분에 대한 내용만 요청하여 JSON의 형태로 받고 그것을 JS를 통해서 부분을 바꾸는 방식을 따라가기 때문에 렌더링를 client쪽에서 렌더링을 진행하는 CSR를 자연스럽게 채택한다.
- MPA는 전체 페이지를 변경하는데 이미 렌더링이 되어있는 리소스를 받는다. 그 때문에 렌더링을 Server에서 진행하여 정적리소스를 모두 반환해주는 SSR 방식을 채택한다.
CSR과 SSR
Client Side Rendering
순서도
1. User : 웹 사이트 방문
2. Browser : 서버에 컨텐츠 요청
3. Server : 빈 뼈대를 가지고 있는 HTML, 연결된 JS 코드를 응답
4. Browser : JS 다운로드 / 동적 DOM 생성
장단점
- 장점
- 페이지 변경시 구동 속도 빠름
- 서버 부하 낮음
- 사용자 경험 높음
- 단점
- 초기 로딩 속도 느림
- 검색엔진 최적화 불리, 웹 크롤러는 텅텅 빈 HTML만을 바라 보고 있어 아무런 정보를 얻을 수 없음.
- Google bot은 js를 읽는 것이 가능하지만 아직 다른 bot들을 아니기에 SEO가 중요한 페이지는 SSR를 채택하는 것을 권장함
Server Side Rendering
순서도
1. User: 웹 사이트 방문
2. Browser : 컨텐츠 요청
3. Server : 렌더링 준비를 마친 HTML, JS code 응답
4. Browser : HTML 렌더링, JS code 다운로드 / HTML에 Js 로직 연결
장단점
- 장점
- 초기 구동 속도 빠름
- 모든 데이터가 HTML에 있으므로 검색 엔진 최적화(SEO)가능
- 단점
- 로딩 중에는 아무런 반응을 얻을 수 없음
- 페이지를 변경할수록 서버에 부하가 걸림
CSR / SSR의 비교
CSR > SSR
공부를 하면서 느낀점은 굉장히 CSR을 더 트랜디하게 받아드리고 있는 분위기이고 사용자 경험을 중요시 하는 지금에 더 알맞는 방식이라고 생각이 들었다. 그런데, CSR의 장점과 SSR의 장점을 모두 취하는 방식은 없을까? CSR의 장점에 SSR의 장점을 더한 방식은 없을까?라는 생각이 들었다.
CSR + SSR
비전공자가 공부를 하면서 느꼈다는 점은 벌써 다른 사용자들도 느꼈으니까 이미 제공하는 툴들이 있다는 점이다.
- Express
Node.js와 연동하는 프레임워크는 아니지만 CSR과 SSR를 동시에 서비스할 수 있는 라이브러리. 라이브러리인만큼 자유도가 높지만 그만큼 진입장벽이 높다는 점이 단점이다. - NEXT.js
React와 연동되는 프레임워크. 페이지별로 CSR과 SSR을 선택하여 연동될 수 있도록 제공하고 있다. - Universal
angular와 연동되는 프레임워크. 초기에는 angular와 따로 구동할 수 있게 나눠져 있었지만 지금은 angular와 합쳐지며 angular를 사용하면 따로 다운로드 없이 쓸 수 있다. - NUXTJS
vue와 연동되는 프레임워크로 다른 프레임워크를 제공하는 것에 영감을 받아 지원하기 시작했다.
reference
우아한 Tech, YOUTUBE, [10분 테코톡] 신세한탄의 CSR&SSR, https://www.youtube.com/watch?v=YuqB8D6eCKE&list=PLgXGHBqgT2TvpJ_p9L_yZKPifgdBOzdVH&index=22