지금까지 클라이언트 사이드 렌더링과 서버 사이드 렌더링 둘 다 사용해보고 느낀 차이점을 정리해보고자한다.

클라이언트 사이드 렌더링

싱글 페이지 어플리케이션

싱글 페이지 어플리 케이션(SPA)은 서버로부터 새로운 페이지를 불러오지 않고 현재의 페이지를 동적으로 다시 작성하는 웹 애플리케이션이나 웹사이트를 말한다.

내가 가장 최근에 한 프로젝트들은 싱글 페이지 어플리케이션으로 하나의 HTML에 여러 js파일을 가지는 형태였다.

싱글 페이지 어플리케이션은 보통 클라이언트 사이드 렌더링 방식(CSR)을 취하는데 이 클라이언트 사이드 렌더링 방식은 클라이언트 즉, 브라우저에서 자바스크립트 파일을 통해 데이터를 렌더링하는 방식이다.
그래서 클라이언트에서 데이터 요청이 발생하면 필요한 데이터만 백엔드 서버에 요청하여 데이터를 받아온다.

장점

• 웹에 필요한 모든 정적 리소스를 최초에 한번만 다운로드한다.
• 이후 필요하거나 수정된 데이터만 서버에 요청하여 받아오기 때문에 서버 트래픽이 감소한다.

단점

• 첫번째 장점과 반대로 한번만 다운로드하기때문에 초기 구동 속도가 상대적으로 느리다.

서버 사이드 렌더링

서버 사이드 렌더링은 서버에서 데이터까지 모두 포함하여 페이지를 구성한 후 브라우저에 전달하는데 완전히 만들어진 HTML 파일을 브라우저로 전달한 후 렌더링하는 방식이다.

장점

• 클라이언트 사이드 렌더링에 비해 초기에 다운받는 파일이 많지 않아서 초기 로딩 속도가 빨라 사용자가 컨텐츠를 빠르게 볼 수 있다.

단점

• 클라이언트가 페이지를 이동하면 브라우저 -> 프론트 서버 -> 백엔드 서버 -> 데이터베이스를 거쳐 데이터를 가져온 후 페이지를 보여주는 과정을 반복한다.
• 매번 서버에 요청을 하기 때문에 서버 부하 문제가 발생할 수 있다.

두가지를 보완한 Nest.js의 작동원리

• 초기에 사용자가 서버에 페이지 접속을 요청하면, 서버 사이드 렌더링 방식으로 HTML을 보내줌
• 브라우저에서 JS를 다운로드함
• 사용자, 페이지가 서로 상호작용하며 다른 페이지로 이동할 땐, 서버가 아닌 클라이언트 사이드 렌더링 방식으로 브라우저에서 처리함.

CSR과 SSR방식 둘 다 각각의 장단점이 존재하기때문에 이 두가지의 단점을 보완하여 리액트환경에서는 Nest.js라는 프레임워크가 등장하였다고한다.