📌 미리 알면 좋은 지식

• Rendering : 보통 HTML 코드를 웹 브라우저가 읽어들여서 브라우저 상에 보여주는 행위. 따라서 뒤에 나올 CSR은 웹 브라우저가 읽어들일 HTML코드를 클라이언트측에서 보내주며, SSR은 HTML코드를 서버측에게 보내준다.
• SPA(Single Page Application): 최초 한 번 페이지 전체를 로딩한 뒤, 데이터만 변경하여 사용할 수 있는 애플리케이션

CSR(Client Side Rendering)

클라이언트인 브라우저가 렌더링을 처리하는 방식이다. 즉, 서버에서 받은 데이터를 통해 클라이언트인 브라우저가 화면(View)단을 그리는 주체가 된다.

사용자의 행동에 따라 필요한 부분만 다시 읽어온다. 서버는 단지 JSON파일만 보내주고, HTML을 그리는 역할은 자바스크립트를 통해 클라이언트 측에서 수행하는 방식이다.

✨ 장점

• 네이티브 앱과 비슷한 빠른 인터랙션을 구현할 수 있다.
  • view렌더링을 브라우저에게 담당시킴으로서 서버 트래픽을 감소시키고, 사용자에게 더 빠른 인터렉션을 제공한다.
  • 새로고침이 발생하지 않아 사용자가 네이티브 앱과 비슷한 경험을 할 수 있다.

🤔 단점

• 첫 페이지 로딩 속도가 SSR에 비해 다소 느리다.
  • 서버에 첫 요청 시 전체 페이지에 대한 모든 문서 파일을 받다보니, SSR보다 로딩이 느리다.
• 검색엔진최적화(SEO)에 대한 추가 보완작업이 필요하다.
  • 포털 사이트 검색엔진 크롤러가 웹사이트에 대한 데이터를 제대로 수집하지 못하는 경우가 발생할 수 있다. 구글의 검색엔진의 경우 자바스크립트 엔진이 내장되어 있어 크롤링이 되지만, 네이버와 다음의 경우 검색엔지이 제대로 크롤링을 못하기 때문에 별도의 보완작업이 필요하다.

SSR(Server Side Rendering)

클라이언트(브라우저)가 서버에 매번 데이터를 요청해서 서버에서 처리하는 방식이다. 클라이언트에서 요청이 들어올 때마다 매번 서버에서 새로운 화면(View)을 만들어 제공한다. 즉, 서버가 화면(View)을 그리는 주체가 되는 것이다.

기존의 전통적인 방식이다.

✨ 장점

• 첫 페이지 로딩 속도가 CSR에 비해 더 빠르다.
  • 해당 첫 페이지에 해당하는 문서만 브라우저에게 전달하여 브라우저가 렌더링하기 때문에 초기 로딩 속도가 CSR에 비해 빠르다.
• 검색엔진최적화(SEO)가 가능하다.
  

🤔 단점

• 초기 로딩 이후 페이지 이동 시 속도가 다소 느리다.

  • 페이지 이동을 할 때마다 클라이언트가 서버에게 필요한 데이터를 요청하고 서버가 응답해주는 방식이다보니 속도가 다소 느리다.

• 프로젝트의 복잡도가 높아진다.

  • 라우터를 사용다보면 복잡도가 높아질 수 있다.

• 참고 : https://xpectation.tistory.com/155, https://github.com/gyoogle/tech-interview-for-developer/blob/master/Web/CSR%20%26%20SSR.md