서버사이드 렌더링(SSR)과 클라이언트사이드 렌더링(CSR)

서버 사이드 렌더링(SSR)

• SSR : Server Side Rendering

• 전통적인 웹 어플리케이션은 서버 사이드 렌더링 방식을 사용한다.

서버 사이드 렌더링의 동작 방식

• 요청 시마다 새로고침이 일어나며 서버에 새로운 페이지에 대한 요청을 하는 방식이다.

• 서버 측에서 HTML & View를 생성하여 응답한다.

서버 사이드 렌더링의 장점과 단점

1. 장점

  1-1. 검색엔진최적화(SEO)가 가능하다.

 

  1-2. 성능 개선(첫 로딩이 매우 짧다.)

    첫 렌더링된 HTML을 클라이언트에게 전달해주기 때문에 초기로딩속도를 많이 줄여줄 수 있다. 사용자가 처음부터        사이트의 정적인 컨텐츠를 이용할 수 있다. (단, 사용자 인터랙션 부분은 제외) 동적인 부분은 자바스크립트 파일을        불러오고 렌더링 작업이 완료되면 이용할 수 있다.

 

2. 단점

  2-1. 서버의 트래픽 부담 

    현대의 웹사이트에는 필요한 리소스들과 데이터들이 기하급수적으로 늘어나면서 새로운 페이지로 이동할 때마다 매      번 그에 필요한 리소스들을 전부 응답해주어야 하므로 부담이 너무나도 크다.

  2-2. 초기 구동 속도가 느리다.

    페이지를 읽어들이는 시간, 자바스크립트를 읽어들이는 시간, 그리고 자바스크립트가 화면을 그리는 시간까지 모두      마쳐야 콘텐츠가 사용자에게 보여진다. 여기에 웹 서버에서 데이터라도 가져와야 한다면 그 시간은 더욱 길어진다.        현재 페이지에 필요한 파일뿐만 아니라 이 웹사이트에 필요한 모든 리소스들을 초기에 한꺼번에 받아온다.

클라이언트 사이드 렌더링(CSR)

• CSR : Client Side Rendering

• SPA(Single Page Application)이 클라이언트 사이드 렌더링 방식을 사용한다.

• 서버는 단지 JSON 파일만 보내주고, 클라이언트에서 자바스크립트를 통해 View를 렌더링하는 방식이다.

클라이언트 사이드 렌더링의 동작 방식

1. 먼저 하나의 HTML 파일, 그 외 여러 리소스들을 서버에서 제공한다. (단, 데이터는 제외)

2. 데이터를 받아오기 전까지 사용자가 보고 있는 화면에는 로딩창이 보여진다.

3. 브라우저가 서버에게 직접 필요한 데이터들을 요청하여 응답받는다.

4. 브라우저는 자바스크립트를 읽어들이고 자바스크립트를 통해 View를 렌더링한다.

5. 페이지의 이동 없이 데이터가 바뀜에 따라 페이지를 구성하는 일부 컴포넌트들만이 교체되며 화면이 변경된다.

 

클라이언트 사이드 렌더링의 장점과 단점

1. 장점

  1-1. 트래픽 감소 -

    필요한, 변경된 데이터만 받아온다.

  1-2. 사용자에게 더 나은 경험을 제공한다.

    새로고침이 발생하지 않아 사용자가 앱을 사용하는 경험을 할 수 있다.

  1-3 최초 로딩 이후에는 요청들에 대해서 인터랙션이 빠르다.

 

2. 단점

  2-1. 검색엔진

    일반적인 웹 크롤러, 봇들은 HTML 내용만 수집하기 때문에 빈 페이지로 인식한다. javascript가 실행이 완료되어          View가 렌더링되기 전까지 HTML은 빈 화면이기 때문이다.

  2-2. 초기 구동 속도가 느리다.

    페이지를 읽어들이는 시간, 자바스크립트를 읽어들이는 시간, 그리고 자바스크립트가 화면을 그리는 시간까지 모두      마쳐야 콘텐츠가 사용자에게 보여진다. 여기에 웹 서버에서 데이터라도 가져와야 한다면 그 시간은 더욱 길어진다.        현재 페이지에 필요한 파일뿐만 아니라 이 웹사이트에 필요한 모든 리소스들을 초기에 한꺼번에 받아온다.

  2-3. 보안 문제

    쿠키를 제외하고는 사용자에 대한 정보를 저장할 공간이 마땅치 않다.

 

 

참고

• 서버 사이드 렌더링 그리고 클라이언트 사이드 렌더링