본문 바로가기
Web

CORS/CSR/SSR

by sophia02 2022. 9. 20.

CORS(Cross-Origin Resource Sharing)

브라우저에서는 보안적인 이유로 cross-origin HTTP요청을 제한합니다. 만약 cross-origin 요청을 하려면 서버의 동의가 필요하고, 서버가 동의할 경우 브라우저에서는 승인을, 동의하지 않는다면 브라우저에서 거절을 반환합니다.

이러한 허락을 구하고 거절하는 메커니즘은 HTTP-header를 이용해서 가능하며, 이를 CORS(Cross-Origin Resource Sharing)라고 부릅니다.

이러한 관문과 같은 역할을 하기에 cross-origin 요청을 보다 안전하게 할 수 있습니다.

 

*cross-origin

1. 프로토콜 (http, https)

2. 도메인

3. 포트번호

 

CSR(Client Side Rendering)

클라이언트측에서 모든것을 작동하는것, 즉 클라이언트 측에서 모든 페이지의 내용을 만드는 것이라고 할 수 있습니다.

 CSR은 클라이언트 측에서 최초에 1번 서버에서 전체 페이지를 로딩하여 보여주고, 이후에는 사용자의 요청이 올 때마다, 자원을 서버에서 제공한 후, 클라이언트가 해석하고 렌더링 하는 방식을 말합니다

 

단점

1. 첫 페이지 로딩까지 많은 시간 소요

2. SEO(Search Engine Optimization)가 좋지 않음

3. 구글 네이버 등의 검색엔진들은 서버에 등록된 웹사이트들을 하나씩 이동하며 해당 웹 사이트의 HTML을 분석해서 유저가 웹 사이트를 빠르게 검색 할 수 있도록 도와주나, CSR의 경우 HTML의 바디는 대부분이 비어있어 분석하기에 어려움이 있음

 

SCR(Server Side Rendering)

CSR과 달리 서버에서 필요한 데이터를 가져와서 HTML파일을 만들고, 이를 클라이언트에게 넘겨줍니다

첫 페이지 로딩시간이 빠르며, 모든 컨텐츠가 HTML에 담겨있기에, 효율적인 SEO가 가능해집니다

 

단점

1. 깜빡임 이슈

=> 사용자가 클릭과 같은 동작을 하게 되면 전체적인 웹 사이트를 다시 서버에서 받아오는 것과 동일하기 때문

2. 과부화가 걸리기 쉬움

=> 유저가 클릭할 때마다 서버에 요청을 하기 때문

3. 사용자가 빠르게 웹 사이트를 확인할 수 있으나, 동적으로 데이터를 처리하는 자바스크립트를 아직 다운로드 받지 못해서 반응이 없는 경우가 발생할 수 있음

 

 

'Web' 카테고리의 다른 글

DOM  (0) 2022.07.29
REST API  (0) 2022.07.28
API  (0) 2022.07.20
XML, JSON  (0) 2022.07.16