SSR와 CSR에 대해
SSR (Server Side Rendering)
SSR은 서버에서 사용자에게 보여줄 페이지를 모두 구성하여 사용자에게 페이지를 보여주는 방식이다.
쉽게 말해서 서버에서 렌더링할 준비가 다 되면 HTML을 브라우저에게 응답해준다.
출처: https://medium.com/walmartglobaltech/the-benefits-of-server-side-rendering-over-client-side-rendering-5d07ff2cefe8
CSR (Client Side Rednering)
CSR은 JavaScript가 다운로드 및 실행될 때까지 기다릴 필요 없이 브라우저가 서버에서 HTML 렌더링을 시작한다.
출처: https://medium.com/walmartglobaltech/the-benefits-of-server-side-rendering-over-client-side-rendering-5d07ff2cefe8
SSR vs CSR
SSR의 경우는 서버에서 페이지를 모두 구성하여 사용자에게 보여주기 때문에 초기 페이지 구성이 느리지만 전체적으로 사용자에게 보여주는 콘텐츠 구성이 완료되는 시점은 빨라진다.
CSR의 경우엔 클라이언트에서 페이지를 렌더링하기 때문에 빠른 속도로 초기 페이지를 볼 수 있지만 실제로 (React, Vue) 등이 실행이 완료되기 전까지 페이지와 상호작용할 수 없고, 서비스에 필요한 데이터를 클라이언트(브라우저)에서 추가로 요청하여 재구성해야 하기 때문에 전체적인 페이지 완료 시점은 SSR보다 느려진다.
CPU의 처리량은 SSR이 CSR처리량보다 훨씬 적다.
SSR을 사용하면 전체 페에지가 올바른 메타데이터로 컴파일 되어 프론트 엔드로 전송된다.
하지만, CSR를 사용하면 사이트의 콘텐츠가 JS를 통해 자동으로 생성된다.
어떤 페이지에서 다른 페이지로 이동할 때 메타데이터를 변경하는 것이 JS 실행에 의존하기 때문에 각 페이지에 대한 메타데이터를 설정하여 클라이언트에서 렌더링 되도록 해야 한다.
즉, SSR 방식이 CSR보다 SEO 이용이 수월하다.
어떤거로 개발해야 할까?
위에 글을 읽고 CSR와 SSR에 대해 알았다면 드는 생각은 하나다.
"CSR의 빠른 초기 페이지 로드와 SSR 성능을 조합해서 쓰는 방법이 없을까?"
방법이 존재한다. Next.js라는 웹 프레임워크를 사용하는 것.
해당 프레임워크는 Pre-rendering HTML 방식을 이용하며 SSR과 CSR 방식을 혼합하여 사용하고 있다.