CSR, SSR

렌더링 (Rendering)이란 웹 페이지를 구성하는 HTML, CSS 의 파일을 브라우저 위에 그려 주는 것을 의미한다.

여기서 크게 두 가지 방법으로 나뉜다.

 

CSR (Client Side Rendering)은 클라이언트 단에서 렌더링을 수행한다. 사용자가 웹사이트에 접근 할 때, 웹사이트에서 자공하는 페이지의 HTML, CSS의 리소스를 클라이언트에서 다운로드하고, 페이지 전환을 처리한다. CSR의 경우 서버는 페이지가 맨 처음 렌더링 될 때 웹 리소스 파일을 제공하는 역할, 그리고 페이지 로딩이 이루어진 후 클라이언트 측에서 요청한 데이터를 전송해주는 역할만을 수행해준다. 

사용자가 페이지를 요청하면 해당 페이지의 HTML 파일을 서버가 보내준다. CSR 방식은 클라이언트 단에서 동적으로 구성하기 때문에 서버의 초기 HTML 파일에는 정보가 거의 담겨있지 않을 것이다.  이후 JS, CSS 파일과 데이터를 가져온다. 이후 동적으로 HTML을 생성하고, 웹페이지가 보이게 된다.

 

SSR(Server Side Rendering)은 서버에서 렌더링 과정을 수행한다. 사용자가 웹 페이지에 접속하면 서버로 페이지의 요청이 이루어지고, 서버에서 필요한 HTML, CSS 등을 이용해서 페이지를 렌덩링하고, 클라이언트로 반환한다. 즉, 완벽한 HTML파일을 서버가 만들어서 클라이언트에게 제공한다. 

 

두 방식의 웹 페이지의 성능은 크게 달라지므로, 렌더링 방식을 정확하게 이해해야 한다. CSR은 초기 로딩을 제외하고 렌더링 속도가 빠르고, 페이지 상의 변화가 생기더라도 서버의 요청을 보내지 않기에 더 좋은 UX (사용자 경험)을 제공한다는 장점이 있으나, 이는 오히려 단점으로 작용되어, 첫 화면 로딩 속도가 느리고, HTML을 서버에서 받아온 뒤 클라이언트에서 동적으로 HTML을 구성하기 때문에 SEO (검색 엔진 최적화)에 어려움이 있다.

SSR은 CSR보다 첫 화면 로딩 속도가 빠르고, HTML 내에 모든 내용이 담겨 있기 때문에, 검색 엔진 최적화가 가능하다는 장점이 있다. 하지만, 화면에 변화가 생길 때 마다 화면을 다시 그리기 때문에, 화면 전환이 이루어질 때 마다 깜빡임 (Blinking)이 이루어질 수 있다는 단점과, 서버 과부하에 취약하다는 점이 있다. 또한, HTML 파일이 구성되어 화면에 웹 페이지가 보여도 화면이 JS파일 다운로드가 이루어지지 않아서 요소들이 반응하지 않는 경우가 생길수도 있다.

 

즉, 로딩 속도가 느리지만 서버에 부담이 적은 CSR, 페이지 로딩 속도가 빠르지만 서버 부담이 큰 SSR 중 웹 사이트의 특성을 고려하여 렌더링 방식을 사용하는 것이 좋을 것이다. 이 둘은 모두 상호보완적으로 모두 사용될 수 있다는 장점이 있다.