모바일 웹이 등장하고 활성화되기 시작하면서 일반 데스크탑보다 성능이 낮은 모바일에서도 웹 페이지를 출력할 일이 늘었고 이에 따라 SPA가 등장하게 되었다.
SPA(Single Page web Application)는 최초 한 번 페이지를 로딩한 뒤 데이터가 변하면 변한 부분만 다시 로드하는 방식의 애플리케이션을 말한다.
- 일관성 있는 코드의 작성
서버에서는 JSON만 넘겨주고 html을 그리는 역할이 클라이언트 측으로 넘어가면서 JS를 이용해 화면을 그리게 되었다.
클라이언트 사이드 방식을 통해 클라이언트 측에서는 좀 더 편하게 일관성 있는 코드를 작성할 수 있다.
하지만, 클라이언트 사이드 렌더링 방식에는 문제가 존재한다.
- 초기 구동 속도의 증가
페이지를 그리고, JS 파일을 다운받고, 그리고 JS가 화면을 그리는 시간이 모두 지나야 화면이 사용자에게 보여진다. 즉, 초기 구동 속도가 낮아 사용자 경험을 떨어트리게 된다.
비록, 초기 구동 속도가 느리지만 초기 화면을 로드한 후 화면을 데이터의 변화에 따라 그릴 때는 빠른 인터렉션을 보인다.
- 검색 엔진 최적화(Search Engine Optimization, SEO)
클라이언트 사이드 렌더링 방식에서는 초기 html에는 컨텐츠가 없는 빈 껍데기인 상태이다.
모든 검색 엔진이 그런 것은 아니지만, 검색 엔진에서 컨텐츠를 검색할 때 JS 파일의 내용은 읽어들이지 못하기 때문에 B2C를 목적으로 하는 웹 사이트의 경우에는 치명적인 문제가 될 수 있다.
서버 사이드 렌더링의 경우, 클라이언트 사이드와 반대로 생각하면 편하다.
서버 사이드 렌더링이란 개념은 서버에서 미리 페이지를 그려 클라이언트에 보낸다.
이 때 가상DOM을 활용하여 바뀐 부분만 바꿔주는 등 클라이언트에서의 부하는 최소화한다.
- 초기 구동 속도의 감소
위에서 말했듯이 서버에서 미리 페이지를 그려 클라이언트에 보내기 때문에 사용자 경험이 개선 되고 사용자 입장에서는 화면이 바뀌는 과정을 보지 않고 최초에 완성된 화면을 볼 수 있게 된다.
- 검색엔진 최적화(Search Engine Optimization, SEO)
이또한 마찬가지로 서버에서 컨텐츠를 포함하여 화면을 그리고 클라이언트 측으로 넘겨주기 때문에 검색엔진에서는 컨텐츠를 포함한 내용을 검색하게 된다. 즉, 클라이언트 사이드 렌더링에서 존재했던 SEO 문제를 해결할 수 있다.
- 복잡도와 서버의 부하 증가
React를 쓴다고 가정했을 때 서버 쪽에서 JSX를 사용할 수 있도록 빌드하거나 변환하는 과정이 필요해진다. 최초 세팅 시 어려움이 증가하게 되는 것이다. 물론 이러한 러닝 커브를 줄이기 위해 React에서는 Next.js와 Vue에서는 Nuxt.js와 같은 서버사이드 라이브러리가 존재한다.
그리고 클라이언트측에서의 부하가 없어진 것이 아닌 서버로 넘어간 것이기 때문에 써드 파티 라이브러리를 통해 비동기식으로 렌더링이 발생하도록 만들어주거나 웹 서버와 API 서버를 분리하는 등의 작업이 필요하다.