SSR(Server-Side Rendering) CSR(Client-side Rendering)의 이해

백엔드 개발을 진행하며 

SSR은 서버에서 동적으로 html을 생성하여 response해주고 클라이언트 페이지에 렌더링 하는 방식이고,

CSR은 초기에 서버로부터 정적인파일 (HTML, CSS, JavaScript) 등을 받고 필요한 부분을 받아와 업데이트 시켜주는 방식으로 이해하고 있었는데 실무에 적용해서 개발을 진행하다 보니 헷갈려서 이곳에 정리해보려고 한다.

 

 

먼저, SSR(Server-Side Rendering)은 

서버에서 전체 HTML을 생성하여 클라이언트에게 전달하고, 클라이언트는 해당 HTML을 화면에 렌더링하는 방식이다.

나는 여기서 '전체'라는 단어에 초점을 맞춰서 이해했다. 완성된 전체의 웹페이지를 서버에서 받아온다는 점에서 검색엔진 최적화(SEO)에 유리하고, 빠른 페이지 렌더링, OG(Open Graph) 태그를 페이지 별로 적용하기 위해서 SSR을 사용한다고 볼 수 있다.

 

 

CSR(Client-side Rendering)은

초기에 서버로부터 정적인 HTML, CSS, JavaScript 파일을 받고, 클라이언트(브라우저)에서 JavaScript를 사용하여 동적으로 HTML을 생성하고 업데이트하는 방식이다.

클라이언트는 서버로부터 받은 HTML과 Javascript 파일을 기반으로 브라우저에서 동적으로 화면을 구성하고 업데이트한다. CSR은 초기 로딩시에는 정적인 컨텐츠만을 받아오고 나머지 부분은 클라이언트에서 동적으로 처리하기 때문에 사용자 경험과 상호작용이 뛰어날 수 있다. 하지만 정적파일을 초기에 한번에 받아오기 때문에 받아오는 과정에서 SSR보다 느릴 수 있다는 단점이 존재한다.

 

 

이처럼 SSR과 CSR은 각각 특징과 장단점이 존재하기 때문에 어떤 방법이 맞는 방법인지 말할 수는 없지만, 개발 프로젝트의 특성에 따라서 사용하면 될 것 같다. 이때 SSR, CSR을 혼합해서 사용하는

Hybrid Rendering은 SSR방식으로 초기 HTML을 렌더링한 후에, 클라이언트에서는 CSR방식으로 필요한 부분만 동적으로 업데이트하는 방식을 사용한다.

이렇게 혼합 방식을 사용하면 초기 로딩속도도 빠르고 SEO에 유리한 SSR의 이점을 활용하면서도 동적인 UI업데이트와 상호작용에 CSR의 장점도 활용할 수 있게 되므로 혼합방식을 사용하여 사용자경험을 향상시킬 수 있다