서버 사이드 렌더링과 클라이언트 사이드 렌더링

글자 그대로 생각하면 서버 사이드 렌더링은 서버에서 렌더링 하는 것이고 클라이언트 사이드 렌더링은 클라이언트에서 렌더링 하는 것이라고 생각됩니다. 이번 글에서는 이 의미가 맞는지 확인하고 어떠한 장점과 단점이 있는지 알아보겠습니다. :)

 

1. 서버 사이드 렌더링 (Server Side Rendering, SSR)

서버 사이드 렌더링은 서버에서 웹 페이지를 렌더링 하여 클라이언트로 전송하는 것입니다. 서버에서 페이지를 그려 놓은 후 브라우저에서 화면에 표시하는 것이라고 말할 수 있습니다. 또한, 서버 사이드 렌더링은 요청마다 새로고침이 일어나 웹 페이저 전체를 다시 로딩하는 특징을 가집니다.

 

서버 사이드 렌더링은 브라우저에 화면을 표시하는 가장 일반적인 방식입니다. 그러나 요즘의 웹 사이트는 너무나 많은 정보를 제공하고 있어 계속된 로딩을 하는 방식으로는 문제가 발생하게 되었습니다.

 

이에 대해 '클라이언트 사이드 렌더링' 이라는 새로운 방식이 생겼습니다.

출처:  The Benefits of Server Side Rendering Over Client Side Rendering

 

2. 클라이언트 사이드 렌더링 (Client Side Rendering, CSR)

클라이언트 사이드 렌더링은 서버에서 전체 페이지를 한번 렌더링 하여 보여주고 사용자 요청 때마다 리소스를 서버에서 제공받아 클라이언트가 해석하고 렌더링 하는 방식입니다. 서버 사이드 렌더링과 달리 서버에 HTML 문서를 요청하는 것이 아니라, 브라우저에서 자바스크립트로 콘텐츠를 렌더링 하는 것입니다. 

 

클라이언트 사이드 렌더링은 1) SPA (Single Page Application)에 많이 사용되는 렌더링 방식입니다.

 

1) SPA (Single Page Application) : 최초 한 번 페이지 전체를 로딩한 뒤, 데이터만 변경하여 사용할 수 있는 애플리케이션

출처:  The Benefits of Server Side Rendering Over Client Side Rendering

 

위에서는 두 렌더링 방식의 개념에 대해 설명했습니다. 아래에서는 두 방식의 장단점을 비교하고 어떠한 서비스에 적합한지 설명하겠습니다.

 

3. 서버 사이드 렌더링 VS 클라이언트 사이드 렌더링

서버 사이드 렌더링은 서버에서 렌더링 한 후에 가져오기 때문에 사용자가 보는 초기의 화면 로딩시간이 빠르고 HTML에 대한 정보가 처음부터 포함되어 있기 때무에 검색엔진에 대한 SEO(검색 엔진 최적화)에 좋습니다. 그러나 페이지를 이동할 때 마다 매번 서버에 요청해야 하므로 전체적으로 볼 때에는 페이지 렌더링이 느리고 서버에 부담이 됩니다.

 

클라이언트 사이드 렌더링은 사용자의 행동에 필요한 부분만 다시 로딩하기 때문에 빠른 반응속도를 가지고 사이트의 상호작용이 활발합니다. 그러나 최초의 로딩에 모든 리로스를 받아야 하기 때문에 초기 로딩시간이 느리고, 처음에는 HTML이 비어있어 크롤러가 데이터를 수집할 수 없기 때문에 SEO에 문제가 발생합니다. 

 

서버 사이드 렌더링과 클라이언트 사이드 렌더링 각자의 개념과  장단점을 확인해 보았습니다. 두 렌더링 방식은 어느 것이 더 우수한 방법이다라고 말하기는 어렵습니다. 자신이 제공하려는 서비스에 맞춰 필요한 방식을 적절히 사용하게 좋을 것 같습니다.