ep 10. CORS, SSR, CSR이란?

CORS(Cross-Origin Resource Sharing)란?

브라우저에선 cross-origin HTTP요청들을 보안을 위해 제한하기 때문에 요청을 하기 위해 서버의 동의가 필요하다.

허용하고 거절하는 이런 메커니즘을 HTTP-header를 통해 가능하다. 이를 CORS 라 하는 것이다. 쉽게 말하자면 브라우저에서 cross-origin 요청을 안전하게 수행할 수 있도록 해주는 매커니즘을 뜻한다.

여기서 cross-origin이란 프로토콜, 도메인, 포트번호 중 한가지라도 다른 경우를 말한다.

 

SSR(Server Side Rendering)이란?

단어의 뜻 그대로 서버쪽에서 렌더링 준비를 끝마친 상태로 클라이언트에 전달하는 방식이다.

 

단계를 살펴보면

User(사용자)가 Website에 요청을 보낸다 

➜Server가 즉시 렌더링 가능한 html파일을 만든다. 

➜클라이언트에서 바로 html이 렌더링 된다.

(Javascript가 읽히기 전이기 때문에 사이트 자체 조작은 아직 불가능)

➜클라이언트가 Javascript를 다운 받는다.

➜ 컨텐츠는 볼 수 있지만 다운로드를 끝내기 전까진 조작할 수 없다.(이 단계에서 User의 요청들을 기억한다)

➜브라우저가 Javascript framework를 실행한다.

➜JS까지 성공적으로 컴파일을 마치면, 다운 중에 있었던 요청들이 실행되고, 웹 페이지에서 상호작용이 가능해진다.

 

CSR(Client Side Rendering)이란?

SSR과 달리 렌더링이 클라이언트에서 일어난다.

요청을 받으면 서버가 클라이언트에 HTML과 JS를 보내주게 되고, 받고 나서 클라이언트에서 렌더링이 시작되는 것이다.

 

단계는 다음과 같다.

User(사용자)가 Website에 요청을 보낸다.

➜CDN이 HTML 파일과 JS로 접근할 수 있는 링크를  클라이언트에 보낸다.

*중략*

➜다운이 완료된 JS가 실행되고, 데이터를 위한 API가 호출된다.

➜서버가 API요청에 응답한다.(이 단계에서 User는 placeholder를 보게 된다.)

➜API에서 받아온 data를 placeholder자리에 넣어주고, 웹 페이지에서 상호작용이 가능해진다.

 

CDN : (엔드 유저 요청에 물리적으로 가까운 서버에서 요청에대한 응답을 하는 방식)

placeholder: HTML의 속성으로 미리 데이터를 입력해놓는 역할

 

SSR과 CSR의 차이점

SSR이 우세한 부분

-첫 페이지의 로딩 시간

아무래도 CSR은 모든 것을 한번에 불러오지만, SSR은 필요한 부분만 불러오기 때문이다.

-크롤러에 대응하기 용이

서버 사이드에서 컴파일 되어 클라이언트로 넘어오기 때문이다.

크롤러 : 웹상의 다양한 정보를 자동으로 검색하고 색인하기 위해 검색 엔진을 운영하는 사이트에서 사용하는 소프트웨어 (스파이더(spider), 봇(bot), 지능 에이전트라고도 함)

CSR이 우세한 부분

-첫 페이지를 제외한 로딩 시간

위에 말했듯 CSR은 한번에 불러오기 때문에 나머지 부분에 있어서는 빠를 수밖에 없다.

-서버 자원을 더 적게 사용

매번 서버에 요청하는 SSR보다 자원을 적게 사용할 수 밖에 없다.