웹 프로젝트를 계획 중 어떤 기술 스택을 사용할지 고민하는 시간을 가졌습니다.
기술 스택의 선택 기준과 프로젝트 구조에 대해 조사하면서 CSR/SSR과 SPA/MPA의 각 특징에 대해 알게 됐습니다.
오늘은 CSR/SSR과 SPA/MPA에 대해 알게 된 내용을 정리하려 합니다.
CSR과 SSR
CSR(=Client Side Rendering)과 SSR(Server Sdie Rendering)은 렌더링을 하는 주체가 누구냐에 따라 구분됩니다.
CSR
특징
- 처음 서버에 요청 시 렌더링에 필요한 파일(html, css, javascript 등)을 모두 한 번에 받는다.
- 전달받은 html 파일은 컨텐츠가 없는 빈 파일이고(React의 index.html처럼), javascript 파일을 실행시키며 DOM을 구성한다.
- 이후 필요한 데이터만 서버에 요청한 후 DOM을 업데이트한다.
장점
- 초기 렌더링을 제외하고는 필요한 데이터만 서버에 요청하기 때문에 서버에 부담이 적게 간다.
단점
- 처음 전달받은 html은 컨텐츠가 없기 때문에 검색 엔진 크롤러가 크롤링하기에 적합하지 않다.
- 따라서 검색 엔진 최적화(SEO) 부분에서 단점이 있다.
- 초기 렌더링 시 javascript를 읽고 화면에 보이기 때문에 초기 렌더링 속도가 느리다.
SSR
특징
- 서버로 요청이 들어오면 서버에서 html 파일을 완성하고(DOM을 완전히 구성) 클라이언트로 전달한다.
- 즉, 요청이 들어오면 서버는 브라우저에서 보는 파일을 만들어 주는 로직을 실행하고 결과물을 전달해준다.
장점
- 검색 엔지 최적화에 적합하다.
- 초기 렌더링 속도가 빠르다.
단점
- 서버에서 렌더링을 진행하기 때문에 서버에 부담이 간다.
SPA와 MPA
SPA(Single Page Application)과 MPA(Multi Page Application)은 웹 애플리케이션을 구성하는 페이지 수에 따라 구분이 됩니다.
SPA
특징
- 하나의 페이지로 구성된 웹 애플리케이션이다.
- 페이지 전환 시 하나의 html 파일에서 javascript로 컨텐츠만 변경한다.
- 이 덕분에 페이지 이동과 새로 고침을 할 때 화면 깜빡임이 없다.(UX적인 장점)
MPA
특징
- 여러 개의 페이지로 구성된 웹 애플리케이션이다.
- 페이지를 전환할 때마다 html 파일이 바뀌기 때문에 화면 깜빡임이 있다.
참고 자료
https://tech.weperson.com/wedev/frontend/csr-ssr-spa-mpa-pwa/#csr-client-side-rendering-vs-ssr-server-side-rendering - 위펄슨 기술 블로그
https://medium.com/aha-official/아하-프론트-개발기-1-spa와-ssr의-장단점-그리고-nuxt-js-cafdc3ac2053
읽어 주셔서 감사합니다 :)
잘못된 부분이 있다면 댓글로 편히 알려주세요😊