CSR에 관해 이야기 하기 전에 먼저 SPA를 먼저 알 필요가 있다.
SPA란 Single Page Application 으로 최초 한 번 페이지 전체를 로딩한 이후부터는 데이터만 변경하여 사용하는 단일 페이지로 구성된 웹 애플리케이션이다. SPA에서는 화면 구성에 필요한 모든 HTML을 클라이언트가 갖고 있고 서버 측에는 필요한 데이터를 요청하고 JSON으로 받기 때문에 기존의 어플리케이션에 비해 화면을 구성하는 속도가 빠르다
CSR이란 말 그대로 클라이언트 측에서 렌더링이 진행된다는 뜻이다. CSR은 클라이언트 측에서 최초에 1번 서버에서 전체 페이지를 로딩하여 보여준다. 그 이후에는 사용자의 요청이 올 때마다, 자원(Resource)을 서버에서 제공한 후, 클라이언트가 해석하고 렌더링 하는 방식이다.
참고로 여기에 Angular JS와 같이 SPA개발에 쉬운 JavaScript 프레임워크 등장했는데, 다시 클라이언트가 무거워지자 다시 View로만 관리하자는 의견에 의해 React JS가 등장하였다.
SEO(검색엔진최적화)가 좋지 않다.
검색엔진은 index.html을 기준으로 하여 데이터, 태그 등을 통해 적합한 사이트 인지 판단을 한다. 하지만 CSR로 작성된 어플리케이션의 경우에는 html파일이 비어있다. 이 때문에 검색엔진에 걸리지 못한다.
초기 구동속도가 느리다.
SSR은 서버에서 view를 렌더링 한 후 가져오지만 CSR은 HTML 다운, JavaScript 파일, 각 종 자원(Resource)을 다운로드한 후에 브라우저에서 렌더링을 하기 때문에 초기 구동 속도가 느리다.
보안 문제가 있다.
SSR은 사용자 정보를 서버 측에서 세션으로 관리를 하지만, CSR은 쿠키 말고는 사용자 정보를 저장할 공간이 마땅치 않다.
위에서 말했듯이 CSR을 통한 SPA에는 초기 구동속도가 느리고 SEO가 좋지 않다고 했다. 이에 SSR을 적용하게 되면 초기 로딩 속도를 개선하여 UX를 향상시킬 수 있다. 이 뿐만 아니라 규모가 커질수록 초기 로딩속도가 느리다는 단점을 SSR을 적용시킴으로써 보완할 수 있다.
https://nextjs.org/docs/getting-started (Next.js 세팅 가이드)
https://github.com/vercel/next.js/ (Next.js Github 레포지토리)