2020-05-04 TIL How the Web Works

seo_kk·2020년 5월 4일
0

SPA 란?

Single Page Application(SPA)

단일 페이지로 구성된 웹 어플리케이션을 말한다. SPA는 화면 이동 시에 필요한 데이터를 서버사이드에서 HTML으로 전달받지 않고 필요한 데이터만 서버로 부터 JSON으로 전달 받아 동적으로 렌더링 한다.

SPA와 기존어플리케이션의 차이점은 기존 어플리케이션은 화면 이동시에 필요한 HTML을 서버에서 받아서 로딩하기 때문에 시간이 걸리지만, SPA는 화면 구성에 필요한 HTML을 클라이언트가 가지고 있고 서버사이드에서는 필요한 데이터를 JSON으로 받아서 처리하기 때문에 기존 어플리케이션에 비해서 화면 구성 속도가 빠르다. 이렇게 SPA는 필요한 부분의 데이터만 받아서 렌더링 하기에 효율적이고 빠르지만, 처음 화면을 로딩할 때 모든 화면이 준비되어있어야하므로 로딩에 시간이 걸리며, 어플리케이션을 구현하는데 기존 어플리케이션보다 복잡할 것이다.

CSR , SSR

SSR 이란?

Server Side Rendering의 약어이다.
한마디로 서버에서 렌더링을 작업한다는 것인데, 사용자가 웹페이지에 접근하면, 서버에 페이지에 대한 요청을 하고 서버에서 html, view와 같은 리소스들을 어떻게 보여질지 해석하여 렌더링한다.

한마디로 요청에 알맞은 HTML 페이지 구성 -> HTML 다운로드 -> 화면렌더링으로 이루어진다.

CSR 이란?

Client Side Rendering의 약어이다.
최초에 1번 서버에서 전체 페이지를 로딩하여 보여주고 이후에 사용자의 요청이 올때마다 리소스를 서버에서 제공훈 후 클라이언트가 해석하고 렌더링 하는 방법이다.

이 때문에 SPA개발에 쉬운 JS프레임워크가 등장했고, 클라이언트가 무거워짐에 따라서 다시 view만 관리하자는 철학으로 React JS가 등장하게 되었다.

HTML 다운로드 -> JS 다운로드 -> JS 실행 -> 서버에서 API 호출 -> API 결과 데이터 바인딩 -> 화면렌더링으로 이루어진다.

둘의 차이점

SSR과 CSR의 가장 큰 차이점은 초기 렌더링 속도, SEO, 보안으로 볼 수 있다.

초기 렌더링 속도

CSR은 사용자의 행동에 따라 필요한 부분을 다시 읽는 방식이고 SSR은 Ajax 기능을 위해 클라이언트 렌더링 요소가 포함된다. CSR은 초기에 구동속도가 느리다. 처음 구동될 때 신경쓸 일들이 많기 때문이다. 하지만 초기세팅만 마친다면 그 다음 부터는 빠른 반응을 보여준다.

SEO

SEO는 Search Engine Optimization의 약어인데, 웹 크롤러는 자바스크립트을 실행하지 못하고 HTML 파일에서만 컨텐츠를 수집한다. 이에 따라서 웹 크롤러는 CSR 방식으로 개발된 페이지를 빈 페이지로 인식하게 된다. 하지만 SSRdms view를 서버에서 전부 렌더링 하는 방식이기 때문에 HTML에 모든 컨텐츠가 저장되어 있으며, 이로 인해 SEO 적용에 문제가 없다.

보안

기존 SSR은 사용자에 대한 정보를 서버 측에서 세션으로 관리를 하고 CSR방식은 클라이언트 측의 쿠키 말고는 사용자의 정보를 저장할 공간이 많지 않다.

profile
BackEnd-Developer

0개의 댓글