1. SSR (Server Side Rendering)

• 서버에서 렌더링을 마치고, Data가 결합된 HTML파일을 내려주는 방식이며 페이지를 이동할 때마다 서버에 새로운 페이지에 대한 요청을 한다.

• HTML에 대한 정보가 처음부터 포함되어 있어서 모든 검색엔진에 대한 SEO(검색 엔진 최적화)가 가능하다.

• 새로운 페이지로 이동할 때마다 서버에 요청하여 페이지를 받아야 하기 때문에 받아오는 시간동안 깜빡거리는 현상을 마주할 수 있다.

• SPA 기법이 대두되면서 CSR 방식이 각광받기 시작했다.

2. CSR (Client Side Rendering)

• 최초 요청시에 HTML을 비롯해 CSS, JavaScript 등 각종 리소스를 받아온다. 이후에는 서버에 데이터만 요청하고 자바스크립트로 뷰를 컨트롤한다.

• 초기 요청 때에 SSR보다 많은 리소스를 요청하기 때문에 렌더링 속도는 SSR이 더 빠르다. 하지만 이후 다른 페이지로의 이동시에는 SSR보다 빠른 페이지 전환 속도와 더 나은 사용자 경험을 제공한다.

• 쿠키나 LocalStorage에서 사용자에 대한 정보를 저장해야 하기 때문에 XSS 공격에 취약하다.

• 구글은 크롤러 안에 자바스크립트 엔진이 들어있어서 크게 문제될게 없지만 네이버나 다음 같은 경우는 자바스크립트를 해석할 수 있는 엔진이 없어서 빈 페이지로 인식하는 등의 SEO(검색 엔진 최적화) 문제가 있다.

• 위의 SEO 문제를 해결하기 위해 SSR with Hydration 기법이 나왔는데 대표적으로 React 진영의 Next.js와 Vue 진영의 Nuxt.js가 위 기법을 구현한 프레임워크다. 즉, 처음엔 서버사이드 렌더링을 하고, 그 후 다른 페이지들에선 클라이언트 사이드 렌더링을 이용하는 방식이다.

3. SPA (Single Page Application)

• 정의 : 서버로부터 새로운 페이지를 불러오지 않고 현재의 페이지를 동적으로 다시 작성함으로써 사용자와 소통하는 웹 애플리케이션이나 웹사이트이다.

• SPA에서 HTML, JavaScript, CSS 등 필요한 모든 코드는 하나의 페이지로 불러오거나, 적절한 자원들을 동적으로 불러들여서 필요하면 문서에 추가하는데, 보통 사용자의 동작에 응답하는 방식이다.

• 장점

1. 단일 페이지로 구성되며 기존의 SSR과 비교할 때, 배포가 간단하며 네이티브 앱과 유사한 사용자 경험을 제공한다.

2. 웹 애플리케이션에 필요한 모든 정적 리소스를 최초에 한번만 다운로드한다.

3. 이후 새로운 페이지 요청 시, 페이지 갱신에 필요한 데이터만을 전달받아 페이지를 갱신하므로 전체적인 트래픽이 감소되고 상대적으로 서버 요청이 적다.

4. 프론트엔드와 백엔드 분리로 개발업무 분업화 및 협업이 용이하다.

• 단점

1. 웹 애플리케이션에 필요한 모든 정적 리소스를 최초에 한번 다운로드하기 때문에 초기 구동 속도가 상대적으로 느리다.

2. SPA는 서버 렌더링 방식이 아닌 자바스크립트 기반 비동기 모델(클라이언트 렌더링 방식)이기 때문에 검색 엔진 최적화(SEO) 이슈가 있다.

• 스마트 폰 사용이 증가하고 있는 현 시대에 트래픽의 감소와 속도, 사용성, 반응성의 향상은 매우 중요한 이슈이고 SPA의 핵심 가치는 사용자 경험 향상에 있으며 부가적으로 애플리케이션 속도의 향상도 기대할 수 있어서 모바일 퍼스트 전략에 부합한다.

참고 : https://m.blog.naver.com/dktmrorl/222085340333 , https://bbbyung2.tistory.com/65 , https://velog.io/@ru_bryunak/SPA-%EC%82%AC%EC%9A%A9%EC%97%90%EC%84%9C%EC%9D%98-SSR%EA%B3%BC-CSR