2023년 10월 18일
최근 렌더링 방식의 변화는 클라이언트 사이드 렌더링(CSR)에서 서버 사이드 렌더링(SSR)로 변화 중이다. 클라이언트 사이드 렌더링이란 용어는 React.js와 같은 도구의 등장으로 등장했다. 또한 서버 사이드 렌더링(SSR)이란 용어는 Next.js와 같은 도구의 등장으로 등장했다.
하지만 SSR은 이전에도 있었다. 고전적인 렌더링 방식이 멀티 페이지 애플리케이션(MPA) 방식이다. 하지만 멀티 페이지 애플리케이션은 명확하게 SSR이라고 하기는 애매하다. 특정 사이트(example.com)에 접속하면 HTML, CSS, Javascript와 같은 리소스를 받아와 출력하였다. 그리고 다른 페이지(example.com/about)로 이동하는 경우 다시 HTML, CSS, Javascript를 받아와 출력하였다. 이와 같이 보여지는 것은 원래 완성된 HTML 일 수도 있고, 템플릿 도구(JSP, PHP, PUG)를 사용하여 만든 HTML 일 수도 있다. 이러한 의미에서 서버 사이드 렌더링이라고도 볼 수 있다.
이러한 멀티 페이지 애플리케이션 방식의 렌더링 방식은 문제점이 존재했다. 전체 페이지를 매번 다시 받거나 그리기 때문에 서버 부하가 존재한다는 것이다. 또한 페이지 이동마다 리소스를 다시 받아오기 때문에 흰 화면이 노출된다는 문제점이 있었다.
이러한 문제점으로 React.js와 같은 도구가 등장하게 되어 이 때부터 싱글 페이지 애플리케이션(SPA)이 가능하게 되었다. 싱글 페이지 애플리케이션이 가능하게 된 것은 클라이언트 사이드 렌더링이라는 렌더링 방식이 등장했기 때문이다. 서버로부터 HTML을 받고 Javascript를 사용하여 웹 페이지를 동적으로 렌더링하는 방식이다. 클라이언트 사이드 렌더링은 한 번 페이지가 로드되면 다른 페이지로 이동하더라도 새로고침이 발생하지 않아 앱과 같은 부드러운 UX를 제공한다.
하지만 이와 같은 방식에도 문제점이 있었다. 페이지가 많아지고 기능이 많아질수록 Javascript 파일이 커지고 Javascript 파일이 큰 경우 초기 로딩 시간이 길어진다는 문제가 있었다. 또한 싱글 페이지 애플리케이션과 같은 경우 초기 HTML 이슈로 인한 SEO 문제가 발생한다는 문제가 있었다. 결국 이러한 문제들로 인해 다시 고전처럼 완성된 HTML이 필요하게 되었다.
그래서 등장한 것이 Next.js다. Next.js는 서버 사이드 렌더링 방식으로 React.js의 문제점들을 해결하게 된다. 완성된 HTML로 검색 엔진이 해석하기 쉬워지고 사용자의 체감 로딩 속도가 향상된다. 또한 Javascript를 받아와 하이드레이션이라는 기술로 클라이언트 사이드 렌더링도 가능하다. 하이드레이션 이후 인터렉션이 가능하다. 그 때부터는 클라이언트 사이드 렌더링이기 때문에 다른 페이지로 이동하더라도 HTML을 받아오지 않는다.
그렇다면 리액트 서버 컴포넌트(RSC)는 어떤 문제를 해결한 것일까?