SSR란?
Server Side Rendering 의 약자로 말 그대로 서버에서 파일을 렌더링 끝마친 상태에서 클라이언트로 전달하는 방식이다.
SSR 단계:
- 브라우저에서 get 요청을 보낸다.
- 서버는 해당 요청을 받고 파일을 렌더링한다.
- 렌더링 완료한 파일을 클라이언트에 보내 즉시 렌더링을 해준다.
- 클라이언트에서 JS파일을 로드한다.
- JS파일이 로드가 다 안된시점에는 브라우저에서 html 화면은 보이나 유저와 상호작용은 할수가 없다.하지만 사용자의 조작을 기억하고 있다.
- 브라우저에서 JS 프레임워크 실행.
- 자바스크립트가 성공적으로 컴파일된후 기억하고 있던 사용자의 조작을 반응 해 주고, 정상적인 웹사이트 처럼 구동이 된다.
장점:
서버에서 이미 로드가 끝난 상태로 html파일을 줬기 때문에 JS다운로드 되는 동안 사용자는 지루하지 않고 웹 컨텐츠를 볼수가 있다.
단점:
브라우저가 다른 경로로 이동할때 마다 서버는 이처럼 똑같은 작업을 수행하게된다. 이렇게 되면 항상 서버에 많은 부하가 걸리게된다
CSR란?
Client Server Rendering 의 약자로 SSR과 반대로 모든 렌더링이 클라이언트에서 진행이 된다 서버는 요청을 받으면 html,css 파일을 클라이언트에게 넘겨줘서 해당 정보를 받고 클라이언트에서 렌더링을 한다.
CSR 단계:
- 브라우저에서 리소스 get 요청을 보낸다.
- 서버에서는 웹 페이지를 렌더링 하는 대신에 웹페이지 골격이 될 단일 페이지를 클라이언트에게 보낸다 이때 JS파일도 같이 보낸다.
- 클라이언트에서 HTML 과 JS 를 다운받고 렌더링을 한다.
- 화면을 그리는 파일은 다 받은후 후속으로 CSR인 경우 클라이언트의 요청이 발생하면 필요한 데이터만 백엔드 서버에 요청을 해서 데이터만 받아온다.
장점:
CSR은 초반에 로딩속도가 느린 반면, 그후론 필요한 데이터만 갱신하면 되기때문에 SSR 방싱에 비해서 서버 부하가 덜 하다는 장점이 있다.
단점:
SEO(검색엔진최적화)의 문제가 발생한다. CSR방식으로 이루어진 사이트에서는 View 를 생성하기 위해서 자바스크립트를 실행시켜야한다. 하지만 대부분의 웹 크롤러 봇들은 자박스크립트 파일을 실행시키지 못한다. 때문에 HTML 에서만 콘첸츠를 수집하게 되고 CSR 페이지를 빈페이지로 인식하게 된다.
SPA란?
Single Page Application 말 그대로 하나의 페이지 어플리케이션이다. 최초에 한번 페이지 전체를 로드한 이후부터 데이터만 변경하여 변경한 부분만 다시 그려주는 CSR방식을 사용한 기법이다.
초기에 브라우저에 보여주는 속도
SSR:
초기에 서버에서 html 파일을 렌더링해주고 클라이언트에 보내주기 때문에 브라우저에서는 굉장히 빠른 시간내에 화면을 그려줄 수 있다. 하지만 JS파일은 아직 받아오지 못한 상태이기 때문에 유저와 아직 상호작용은 못하는 상태지만 사용자 입장에서는 매우빠른 로딩속도 인것처럼 느끼게 해줄수 있다.
CSR:
반면 CSR의 경우 서버에서 View를 렌더하지 않고HTML 다운 + JS파일 + 각종 리소스 다운을 받은 후 브라우져에서 렌더링을 하기 때문에SSR보다는 초기 View 로딩 속도는 오래걸린다.그렇지만 CSR의 경우 사용자의 행동에 따라 필요한 부분만 다시 읽어들이기 때문에서버 측에서 렌더링하여 전체 페이지를 다시 읽어들이는 것보다 빠른 인터랙션이 가능하다.
보안 문제:
SSR에서는 사용자에 대한 정보를 서버 측에서 세션으로 관리를 한다. 그러나 CSR일 경우 쿠키말고는 사용자에 대한 정보를 저장할 마땅한 공간이 마땅치 않는다.
정리
SSR의 경우 초기 로딩속도가 빠르고 SEO에 유리하지만View 변경시 서버에 계속 요청을 해야 하므로 서버에 부담이 크다.
CSR의 경우 초기 로딩속도는 느리지만초기 로딩 후에는 서버에 다시 요청할 필요없이 클라이언트 내에서 작업이 이루어지므로 매우 빠르다.하지만 SEO에 대한 문제가 있다.주의
전통적인 웹 방식이 SSR이 아니라 전통적인 웹 페이지 방식이 SSR 방식을 사용한거고.
SPA 이 CSR이 아니라 SPA이 CSR 방식을 사용한거다.
