[IT] SSR, CSR 그리고 SPA

in It. on Technical term
[IT] SSR, CSR 그리고 SPA

SSR , CSR 에 대해서 알아보고 용어를 학습해보자 그리고 SFC에 대해서 알아보자

1.개요

요세 사용자경험 UI/UX 가 화두가 되는 시기에 Vue.js, React.js 같은 UI 프레임워크가 나오면서 SPA(Single Page Application) 라는 용어가 대두되면서 SSR, CSR 이라는 용어들이 널리 사용되기 시작하였습니다..

이 포스팅에서는 SPA, MPA, SSR, CSR 등의 용어에 대해 알아보는 것을 목적으로 하겠습니다.

2.SPA (Single Page Application)

SPA란 단일페이지로 구성된 어플리케이션입니다. 주로 CSR(Client-side Rendering) 으로 랜더링을 하지만 Nuxt 나 Next를 이용한 SSR(Server-side Rendering) 를 이용할 수 도 있다. SPA의 목적은 최대한 불필요한 리퀘스트를 줄여 속도를 향상시키는데에 있으며 JS, CSS, HTML, IMG 파일을 재용청하는 방식이아닌 진입시 모든 자원들을 다운받아 놓고 화면이동시 JS를 이용해 돔을 재구성하는 방식으로 대부분 구현됩니다.

3.MPA (Multi Page Application)

Multi Page Application. 여러 페이지로 구성된 웹 어플리케이션으로 주로 SSR을 사용합니다.

페이지의 다른 링크를 클릭할 때마다 페이지를 로드하며. MPA는 클릭 하면 다른 페이지로 연결되는 수많은 링크를 포함하고 있습니다 국내에서는 JSP를 생각하시면 가장 이해하기 쉬울 것 입니다.

4.SSR (Server-side Rendering)

서버 사이드 렌더링.

기존에 자주 사용하던 방식의 렌더링입니다. 클라이언트가 서버에 요청을 하면서 브라우저에 표시된 html을 넘기게 되면 서버는 그 요청에 대한 결과값을 도출하여 만들어진 새로운 html을 클라이언트에 넘겨줍니다. 여기서 매번 새로운 html을 서버에서 넘겨주다보니 반응 속도가 느리며, 많은 정보가 있는 웹에서 인터렉션 시마다 페이지가 전체적으로 새로 렌더링되는 것입니다. (요청 시 새로고침이 일어난다) 이를 개선하기 위해 일부 html이나 스크립트만 넘기고 수정하는 방식을 사용했다고 하지만 여전히 클라이언트 요청 > html 리소스 전달 > 서버 결과값 계산 > html 리소스 전달 > 클라이언트 표시의 과정을 거치는 방식입니다.

거의 모든 템플릿엔진이 서버사이드에서 해석되어사 HTML로 반환되어 내려옵니다. 대표적인 템플릿엔진은 JSP 가 있습니다.

5.CSR(Client-side Rendering)

클라이언트 사이드 랜더링

최초에 1번 서버에서 전체 페이지를 로딩하여 보여주고 이후에는 사용자의 요청이 올 때마다, 리소스를 서버에서 제공한 후 클라이언트가 해석하고 렌더링을 하는 방식입니다. 여기에 Angular JS, Backbone JS같이 SPA 개발에 쉬운 JS 프레임워크가 등장했습니다. 여기에 점점 클라이언트가 무거워지자 다시 view만 관리하자는 철학으로 React JS , Vue 가 등장하게 되었습니다

6.SSR VS CSR

서버사이드 랜더링과 클라이언트 사이드 랜더링의 차이점은 명확합니다.

처음 진입시 클라이언트사이드 랜더링이 모든자원을 받아 놓기때문에 그시기에는 서버사이드랜더링이 빨라보일지 몰라도 그후에는 클라이언트사이드 랜더링이 성능 측면에서 우월합니다.

보안측면에서는 서버사이드랜더링이 우세합니다 서버측에서 세션으로 DATA를 관리한다는 측면으로 본다면 클라이언트사이드랜더링은 아무런 대비책이 없는 셈입니다.

SEO 검색엔진 측면에서도 본다면 SSR 이 우세입니다.

이처럼 장단점이 명확하기때문에 프로젝트 성격에 맞게 기술 스택을 선택하여 프로젝트를 진행하셨으면 합니다.

© 2021. All rights reserved.