Ep10 : CORS / CSR / SSR 알아보기

CORS(Cross-Origin Resource Sharing)

서로 다른 도메인에서 리소스 요청을 주고받을 때 보안상의 이유로 주고받을 수가 없는 상황이 발생하는데

이를 해결하기 위해서 나온 것이 CORS이다. 예를 들어서 웹 브라우저와 웹 서버, 날씨 API 서버가 있을 때 웹 브라우저에서 웹 서버를 통해 날씨 API를 받아오게 되는데 이는 과정이 복잡해 바로 웹 서버에서 날씨 API를 받아오고 싶어 진다. 하지만 도메인이 다르기 때문에 받아오지 못하기 때문에 CORS를 이용하는 것이다. CORS는 간단하게 관문이라고 생각하면 된다. 가져오는 리소스들이 안전한지 확인하고 안전하다면 넘겨주는 것이다.

 

CSR(Client Side Rendering)

CSR이란 클라이언트 측에서 모든 것을 작동하는 것을 말한다. 

서버에서 HTML 파일을 클라이언트에 보내주면 파일에는 어플리케이션에 필요한 자바 스크립트의 링크가 들어있다.

그래서 처음 접속 시 빈 화면만 보이다가 링크된 자바스크립트를 서버로부터 다운받아 온다.

다운받는 자바스크립트 안에는 어플리케이션에 필요한 로직이나 프레임워크, 라이브러리 소스코드가 포함되어 있다.

여기에 추가적으로 필요한 데이터를 서버에 요청해서 받아온 다음에 이를 기반으로 동적으로 HTML을 생성해 사용자에게

완성된 어플리케이션을 보여주는 형식이다.

문제점

첫 번째로는 첫 페이지 로딩까지 시간이 오래 걸린다는 점이 있다.

두 번째로는 SEO(Search Engine Optimization)가 좋지 않다는 점이다.

구글, 네이버와 같은 검색 엔진들은 서버에 등록된 웹사이틀 하나씩 돌아다니면서 웹사이트의 HTML을 분석해서

우리가 웹 사이트를 빠르게 검색할 수 있게 도와주는데 CSR에서 사용하는 HTML의 바디는 대부분 비어있기 때문에 

CSR로 작성된 웹 페이지는 분석하는데 어려움이 있다.

 

SCR(Server Side Rendering)

SSR 이란 CSR과 달리 서버에서 필요한 데이터를 가져와서 HTML 파일을 만들고 이를 클라이언트로 넘겨주는 방식이다.

그래서 첫 페이지 로딩 시간이 빠르고, 모든 컨텐츠가 HTML에 담겨져 있기 때문에 효율적인 SEO가 가능하다.

문제점

첫 번째는 깜박임 이슈가 존재한다. 사용자가 클릭을 하게 되면 전체적인 웹사이트를 다시 서버에서 받아 오는 것과 동일하기 때문이다.

두 번째는 서버에 과부하가 걸리기 쉽다. 사용자가 클릭할 때마다 서버에 요청을 하기 때문이다.

세 번째는 사용자가 빠르게 웹 사이트를 확인할 수 있지만, 동적으로 데이터를 처리하는 자바스크립트를 아직 다운로드 받지 못해서 반응이 없는 경우가 발생할 수 있다. 자세히 알아보면 TTV(Timew To View)와 TTI(Time To Interact)라는 개념이 있는데 SCR의 경우 서버에서 먼저 HTML 파일을 받아와서 사용자가 웹 사이트를 볼 수 있지만 자바스크립트 파일을 받아오지 않았기 때문에 동적인 처리가 불가능한 상태이기 때문에 서버에서 받아와야지 가능하게 된다. 이렇게 TTV와 TTI의 시간이 맞지 않아서 세 번째 문제점이 발생하는 것이다.