클라이언트 사이드 렌더링(CSR)과 SPA
리액트는 기본적으로 싱글 페이지 어플리케이션(SPA)으로 하나의 Html에 수많은 js 파일을 가진다. 싱글 페이지 어플리케이션은 기본적으로 클라이언트 사이드 렌더링 방식을 취하는데 CSR은 클라이언트(브라우저)에서 자바스크립트 파일을 통해 데이터를 렌더링 하는 방식이다. 그렇기 때문에 클라이언트에서 데이터 요청이 발생하면 필요한 데이터만 백엔드 서버에 요청하여 데이터를 받아온다.
장점
- 필요하거나 수정된 데이터만 서버에 요청하여 받아오기 때문에 서버 트래픽이 감소한다.
- HTML에 대한 정보가 처음부터 포함되어 있어 모든 검색엔진에 대한 검색 엔진 최적화(SEO)가 가능하다.
단점
- 검색 엔진 크롤러가 정보수집을 제대로 하지 못한다.
- 초기에 데이터를 제외한 모든 코드를 받아오기 때문에 초기 진입 속도가 느리다.
서버 사이드 렌더링(SSR)
서버 사이드 렌더링은 서버에서 데이터까지 모두 포함하여 페이지를 구성한 후 브라우저에 전달하는데 완전히 만들어진 HTML 파일을 브라우저로 전달한 후 렌더링하는 방식이다. 이 때, 새로운 페이지로 이동할 때마다 서버에 페이지를 요청하고 화면 깜빡임 현상이 발생하기에 UX가 다소 떨어진다는 단점이 있다. 또한 페이지를 이동할 때마다 매번 서버에 요청을 하기 때문에 서버의 부하가 커질 수밖에 없다.
장점
- CSR에 비해 다운 받는 파일이 많지 않아서 초기 로딩 속도가 빨라 사용자가 컨텐츠를 빠르게 볼 수 있다.
- HTML에 대한 정보가 처음부터 포함되어 있어 모든 검색엔진에 대한 검색 엔진 최적화(SEO)가 가능하다.
단점
- 클라리언트가 페이지를 이동한다거나 하면 브라우저 => 프론트 서버 => 백엔드 서버 => 데이터베이스를 거쳐 데이터를 가져온 후, 브라우저에 데이터가 그려지는 과정을 반복하게 된다.
- 매번 서버에 요청을 하기 때문에 서버 부하 문제가 발생할 수 있다.
두가지를 보완한 Next.js의 작동원리
1. 초기에 사용자가 서버에 페이지 접속을 요청하면, SSR 방식으로 HTML을 보내줌.
2. 브라우저에서 Javascript를 다운로드하고 리액트를 실행함.
3. 사용자, 페이지가 서로 상호작용하며 다른 페이지로 이동할 땐, Server가 아닌 CSR방식으로 브라우저에서 처리함.
서버 사이드 렌더링이나 클라이언트 사이드 렌더링이나 각각의 장단점이 존재하기 때문에 적절한 상황에서 적절하게 사용하면 훨씬 더 효율적인 어플리케이션 구성이 가능할 것 같다. 리액트 환경에서는 이 두가지의 단점을 보완하여 Next.js라는 프레임워크가 등장한 것이고, 점점 공부하면 공부할 수록 왜 사용하는지에 대해 알아가는 재미가 있어 더 자세하게 공부해보고 싶다.
