SSR VS CSR

SSR(Server Side Rendering)을 사용하는 이유로는 크게 2가지가 있다.

사용자 입장에서의 성능 향상
안정적인 SEO 성능

이중 첫 번째 이유에 대해서 정리해 보았다.

React로 build된 사이트에서 SSR과 CSR(Client Side Rendering)의 차이를 알아보자.

먼저 요점만 말하자면, 서버가 브라우저에게 처음으로 보내는 payload와, 브라우저가 React를 실행해 Javascript를 읽는 타이밍이 다르다.

(사용자에게 페이지가 보여지는 상대적인 시점을 비교하기 위한 그림 - 절대적인 시점은 아니다)

위 그림에서처럼 SSR에서는 서버에서 response 객체에 HTML페이지 자체를 담아서 바로 페이지에 렌더링해버린다. 그 덕분에 사용자에게 보여지는 타이밍이 CSR에 비해 빠른 장점이 있지만, 첫 렌더링에서 Javascript는 포함되지 않기 때문에 렌더링 직후 아직 React와 Javascript파일이 실행되지 않았을 때 (굉장히 손이 빠른)사용자의 클릭 등의 상호작용이 작동하지 않을 수가 있다. 하지만 매크로를 사용하거나 빠르게 티켓팅을 하는 경우가 아니라면 문제가 될 상황은 많지 않을 듯 하다.

앞서 말한 빠른 클릭이 중요한 경우들을 제외하면, SSR의 사용자에게 빠른 로딩시간을 제공한다는 점이 CSR의 로딩 즉시 웹과의 상호작용이 가능하다는 점에 비해 사용자 경험으로써 크게 작용할 것 같다는게 내 생각이다.

더 자세한 장단점 및 비교는 다른 포스트에서 다루어보겠다.