CSR & SSR

요즘에는 React Anguler Vue와 같이 SPA(single page application)같은 자바스크립트 프레임워크를 사용하여 개발한다. CSR과 SSR에 대해서 알아보기 전에 SPA와 MPA대해 먼저 알아보자.

SPA

하나의 페이지로 구성된 웹 어플리케이션으로 헤더는 고정 되어 있고 필요한 부분만 렌더링할 수 있다.

• 초기에 모든 필요한 리소스(HTML, CSS, JavaScript)를 한 번에 로드하고, 이후에는 필요한 데이터만 비동기적으로 가져와서 동적으로 페이지를 업데이트한다.
• 페이지 전환 시 화면 전체를 다시 로드 하지 않기 때문에 깜빡임이 없고 필요한 부분한 업데이트 하여 화면을 렌더링하기 때문에 빠른 응답속도와 사용자 경험이 좋다.

MPA

MultiPageApplication의 약자로 탭을 이동할 때 마다 서버로부터 새로운 Html을 새로 받아와서
새롭게 렌더링 하는 전통적인 웹 페이지 구성 방식이다.

• 서버로 부터 완전한 HTML을 받아와서 렌더링 하므로 검색 엔진 크롤러가 콘텐츠를 쉽게 파악하기 때문에 검색 엔진 최적화(SEO)가 좋다.
• MPA는 요청할 때마다 화면이 깜빡이는 불편함이 있다.

SPA와 MPA는 웹 애플리케이션 페이지 관리 방식에 대한 개념이며 CSR과 SSR은 웹 페이지 렌더링 방식과 관련된 개념이다

SPA에서는 CSR 렌더링 방식을
MPA는 SSR 렌더링 방식을 사용한다.

CSR

CSR은 초기 로딩시 필요한 모든 리소스를 브라우저에 불러와서 클라이언트 측에서 동적으로 페이지를 렌더링하는 방식이다.

• 일반적으로 SPA에서 사용되는 렌더링 방식
• TTI (Time to Interactive)와 TTV(Time to View)의 간극이 없다.
• 초기 로딩 시에는 HTML,CSS,Javascript 파일로 로드하고 페이지 전환 시에는 필요한 데이터를 비동기적으로 가져와서 동적으로 페이지를 생성한다. 그렇기 때문에 초기 로딩 속도가 비교적 떨어진다.
• 초기 로딩 이후에 페이지 일부를 변경할 때는 서버에 해당 데이터만 요청하면 되기 때문에 이후 구동 속도는 빠르다.
• 서버는 빈 뼈대 HTML만 보내면 되기 때문에 서버측 부하가 적다. 하지만 크롤러가 보기엔 빈 HTML 밖에 없기 때문에 검색 엔진 최적화(SEO)에 불리하다.

구글의 크롤러봇은 JS까지 실행할 줄 알기때문에 CSR 웹사이트의 크롤링도 가능하다고 한다.
하지만 완벽하지 않은 단계이고 아직 JS를 실행할 수 없는 크롤러 봇들을 위해서 SSR을 사용

• 이외에 클라이언트에서 연산, 라우팅을 직접 처리하기 때문에 반응속도가 빠르고 사용자 경험이 좋다.
  

CSR의 단점 보완

• 애플리케이션의 JavaScript 코드를 여러 개의 작은 번들로 분할하는code splitting, chunk 분리를 이용한다.
• JavaScript 번들에서 사용되지 않는 코드를 제거하는 최적화 tree-shaking을 사용한다.
• pre-rendering : 프리렌더링을 사용하면 웹 페이지를 미리 렌더링하여 정적인 HTML 파일로 생성할 수 있습니다. 이 정적 파일은 서버에서 미리 생성되어 클라이언트에게 전달한다. 때문에 초기 로딩 속도와 SEO를 개선하는데 도움이 되지만,
  동적인 요소가 포함된 페이지는 재프리렌더링일 필요할 수도 있기 때문에 적합하지 않을 수 있다.
• CSR을 사용하고 있는 SPA에 SSR이나 SSG를 도입한다.

SSR

MPA는 새로운 요청이 있을때마다 서버에서 이미 렌더링된 정적 리소스를 받아오기 때문에 SSR 렌더링 방식을 사용한다.

• 모든 데이터가 이미 HTML에 담겨져서 브라우저에 전달되기 때문에 검색 엔진 최적화(SEO)에 유리하다.
• JS코드를 다운 받고 실행하기전에 사용자가 화면을 볼 수 있기 때문에 초기 로딩 속도 개선된다. 하지만 이 시점에는 사용자가 버튼을 누르거나 이동하려고 해도 인터랙티브한 부분의 반응이 안된다.
• 서버에서 페이지 렌더링이 이루어지므로, 서버에 더 많은 부하가 발생할 수 있다.
• TTI (Time to Interactive)와 TTV(Time to View)의 간극이 있다.
• 사용자의 요청에 따라 서버에서 페이지를 렌더링하여 HTML을 생성하므로 최신 데이터를 포함한
  업데이트 된 페이지를 사용자에게 제공할 수 있다. 이는 페에지의 동적인 콘텐츠를 효과적으로 관리하고 업데이트할 수 있는 장점을 제공한다.
  

주의할 점

그렇다면 SPA는 CSR이고, MPA는 SSR이라고 생각하면 된다? 꼭 그렇지만은 않다.
SPA는 반드시 CSR 방식으로 구현되는 것은 아니다. 서버 측에서 초기 렌더링을 수행하여 서버 측에서 렌더링 된 HTML을 제공하는 SSR 방식과 결합될 수도 있다.
마찬가지로 MPA가 항상 SSR 방식으로 구현되는 것도 아니다. 클라이언트에서 필요한 데이터를 비동기적으로 가져와서 페이지를 업데이트하는 CSR 방식과 결합 될 수도 있다.

SSG

SSG는 정적 사이트 생성(Static Site Generation)으로 웹 애플리케이션을 구축하는 또 다른 접근 방식이다.

SSG는 서버에서 HTML을 보내준다는 측면 에서는 SSR과 비슷하지만 언제 페이지를 만드냐에 차이가 있다.

SSR은 요청 시 서버에서 즉시 HTML을 만들어서 동적으로 페이지를 생성하기 때문에 데이터가 달라지거나 자주 바뀌어서 미리 만들어두기 어려운 페이지에 적합하다.

SSG는 페이지들을 서버에 미리 만들어둔 뒤에 클라이언트가 요청시에 서버는 단순히 정적 파일을 제공하는 역할을 한다.
미리 생성된 정적 HTML 파일을 사용하는 방식이므로 바뀔 일이 거의 없는 페이지에 적합하다.

결론

사용자와 상호 작용이 많고 대부분 페이지가 고객 개인 정보 데이터를 기준으로 구성되는 서비스 라면 검색 엔진 최적화에 크게 신경을 쓸 필요가 없는 경우가 있다. 이런 경우에는 CSR을 선택하는게 좋은 방법이고

회사 홈페이지나 포털 홈페이지에 상위에 노출되게 하고 싶은 경우 그리고 페이지 내용이 자주 바뀐다면 SSR 페이지 내용이 자주 바뀌지 않다면 SSG가 적합하다.

만약 사용자에 따라 페이지 내용도 달라지고 빠른 인터랙션과 검색 엔진 최적화를 모두 잡고 싶다면 CSR + SSR을 사용하고 싶다면 클라이언트와 서버 양쪽에서 렌더링을 수행하는 유니버설 렌더링(Universal Rendering)으로 구현해보는 것도 괜찮은 방법이다.

출처
https://velog.io/@vagabondms/%EA%B8%B0%EC%88%A0-%EC%8A%A4%ED%84%B0%EB%94%94-SSR%EA%B3%BC-CSR%EC%9D%98-%EC%B0%A8%EC%9D%B4
https://www.youtube.com/watch?v=YuqB8D6eCKE