SSR & CSR

Web App

: 웹 브라우저에서 실행되는 어플리케이션 소프트웨어

• 웹 페이지가 디바이스에 설치된 App처럼 보이는 것
• 웹 페이지가 디바이스에 맞는 적절한 UX/UI로 표현되는 형태

 

SPA

서버에서 최초 1장의 HTML만 전달받아 모든 요청에 대응하는 방식

어떻게 한 페이지로 모든 요청에 대응할까?

=> CSR(Client Side Rendering) 방식으로 요청을 처리하기 때문

 

 

 

 

SSR과 CRS

SSR (Server Side Rendering)	- Server가 사용자의 요청에 적합한 HTML을 렌더링하여 제공 - 전달 받은 새 문서를 보여주기 위해 브라우저는 새로고침을 진행
CSR (Client Side Rendering)	- 최초 한 장의 HTML을 받아오는 것은 동일. 단, server로부터 최초로 받아오는 문서는 빈 HTML 문서 - 각 요청에 대한 대응을 js를 사용하여 필요한 부분만 다시 렌더링 흐름) 1. 필요한 페이지를 서버에 AJAX로 요청 2. 서버는 화면을 그리기 위해 필요한 데이터를 JSON으로 전달 3. JSON 데이터를 js로 처리 후 렌더링

=> SSR과 CSR는 좋고 나쁜 것이 아님, 서비스에 적합한 렌더링 방식을 적절하게 활용할 줄 알아야!

 

 

 

CSR 방식을 사용하는 이유?

1. 모든 HTML 페이지를 서버로부터 받지 않아도 됨 == 트래픽↓ , 응답 속도 ↑
2. 새로고침하는 것이 아니라 필요한 부분만 고쳐 나가므로 각 요청이 끊김없이 진행 == UX 향상
3. BE와 FE의 작업 영역을 명확히 분리 할 수 있음 == 협업 용이

 

 

 

CSR는 만능일까?

NO!!! 검색 엔진 최적화(SEO, Search Engine Optimization)가 어려움

• 서버가 제공하는 것은 빈 HTML, 내용을 채우는 것은 클라이언트(브라우저)가 진행
• 대체적으로 HTML에 작성된 내용을 기반으로 하는 검색 엔진에 빈 HTML을 공유하는 SPA 서비스가 노출되기는 어려움

 

 

 

[참고]

SEO(Search Engine Optimization)

: google, bing과 같은 검색 엔진 등에 내 서비스나 제품 등이 효율적으로 검색 엔진에 노출되도록 개선하는 과정

• 검색 = 각 사이트가 운용하는 검색 엔진에 의해 이루어지는 작업
• 검색 엔진 = 웹 상에 존재하는 가능한 모든 정보들을 긁어 모으는 방식으로 동작

=> 검색 엔진이 모으는 정보의 대상은 주로 HTML에 작성된 내용이며 JavaScript가 실행된 이후의 결과를 확인하는 과정이 없음 

=> 최근에는 CSR로 구성된 서비스의 비중이 증가하면서 이들도 검색 대상으로 넓히기 위해 JS를 지원하는 방식으로 발전

 

 

 

 

 

 

아니 왜 붕어빵 왜 우리집 앞에만 왜 없어?