SSR과 CSR

서버 사이드 렌더링과 클라이언트 사이드 렌더링의 차이가 있다.

 

서버 사이드 렌더링(SSR)은 서버 측에서 렌더링하는 방식이다.

클라이언트가 서버에 컨텐츠를 요청하면, 서버는 페이지에 필요한 데이터를 즉시 얻어와 모두 삽입하고, css까지 모두 적용해 렌더링 준비를 마친 HTML과 JS 코드를 응답한다.

브라우저에서는 JS코드를 다운로드하고, HTML에 JS를 연결한다.

모든 데이터가 이미 HTML에 담긴 채로 브라우저에 전달되기 때문에 SEO에 유리하다.

그리고 JS코드를 다운로드받고 실행하기 전에 사용자가 이미 렌더링된 HTML을 볼 수 있으므로, JS 다운로드를 기다려야 하는 CSR에 비해 초기 구동 속도가 빠르다.

 

클라이언트 사이드 렌더링(CSR)은 클라이언트 측에서 렌더링하는 방식이다.

클라리언트가 서버에 컨텐츠를 요청하면, 서버는 빈 뼈대만 있는 HTML을 응답한다. 클라이언트는 연결된 JS링크를 통해 서버로부터 다시 JS파일을 다운로드 받은 뒤, JS를 통해 동적으로 페이지를 만들어 브라우저에 보여준다.

 

빈 뼈대만 있는 HTML을 받아오기 때문에 SEO에 불리하다. 초기 로딩은 느리지만, 이후 페이지 전환이 매우 빠르다.

서버 부하가 적고 서버 비용이 절감되고, 브라우저에서 JS를 실행해야해서 클라이언트의 성능에 영향을 받는다.

 

SEO(Search Engine Optimization)은 검색 엔진 최적화이다.

웹 사이트가 구글, 네이버같은 검색 엔진에서 잘 노출되도록 최적화하는 작업을 말한다.

 

최근에는 Next.js나 Nuxt.js같은 프레임워크를 통해 두 방식의 장점을 모두 활용하는 하이브리드 렌더링 방식도 많이 사용된다고 한다.

초기에는 SSR로 처리하고, 이후 상호작용은 CSR로 처리하는 방식을 구현할 수 있다.