CSR(Client Side Rendering)과 SSR(Server Side Rendering)

CSR은 Client Side Rendering으로 클라이언트 측에서 웹 페이지의 렌더링을 담당하는 것을 의미한다.
반면 SSR은 Server Side Randering으로 서버 측에서 웹 페이지의 렌더링을 담당하는 것을 말한다.

렌더링을 클라이언트와 서버 측에서 하는 것의 차이점은 과연 무엇일까?

클라이언트 측에서 렌더링을 담당하게 될 경우,
JavaScript가 서버로부터 데이터를 요청해 받고, 클라이언트는 이 데이터를 가지고
동적으로 웹 페이지를 렌더링하게 된다.
다시 말해, 서버는 데이터만 제공하고, 실제 페이지 렌더링은 클라이언트가 수행하게 되는 것이다.
CSR은 초기 페이지 로드 시간이 짧고, 사용자 경험이 빠르게 제공되지만
한편으론 초기 로딩 후에 추가적인 데이터 요청이 필요할 때마다 네트워크 트래픽이 늘어나는 단점이 있다.

반면, SSR은 클라이언트가 웹 페이지를 요청하면 서버에서 데이터를 가져와
웹 페이지를 완전히 렌더링한 후 클라이언트에게 전달한다.
SSR은 서버에서 HTML을 완성해서 제공하기 때문에 초기 페이지 로드 속도가 빠르고,
검색 엔진 최적화(SEO)에 유리하다.
그럼에도, 매 요청마다 서버에서 페이지를 다시 렌더링해야 하기 때문에,
서버 부하가 늘어나고, 초기 로딩 시간이 오히려 길어질 수 있는 부담이 있다.

최근에는 Hybrid Rendering이라는 방식이 등장해 CSR과 SSR을 결합하여 사용하기도 한다.
이 방법은 초기 페이지 로드는 SSR을 이후엔 인터렉티브 요소 처리를 위해 CSR을 사용하는 방법이다.

SPA (Single Page Application)

SPA는 CSR 방식이다.
SPA는 Single Page Application으로 단어를 보면 예상할 수 있듯이,
단일 페이지로 구성된 웹 어플리케이션을 의미한다.
SPA는 초기에 한 번 전체 페이지를 로드하고 이후부터는 페이지 전환 시에 필요한 데이터만
동적으로 로드해 사용자 경험을 향상시키는 동작을 한다.
일반적으로는 React처럼 JS 프레임워크나 라이브러리를 사용해
클라이언트 측에서 페이지 렌더링과 데이터 관리를 담당한다.
SPA는 페이지 전환 속도가 빠르고 사용자가 인터렉티브한 경험을 느낄 수 있게 한다.
또한, 서버에 요청하는 횟수가 적어 서버의 부담은 덜하다.
다만, 초기에 전체 페이지를 로드하다보니 로딩 속도가 비교적 느릴 수 있고,
검색 엔진 최적화는 추가적인 처리를 필요로 할 수 있다.

MPA (Multiple Page Application)

MPA는 SSR 방식이다.
MPA는 MultiPage Application으로 여러 개의 페이지로 구성된 웹 어플리케이션을 말한다.
MPA는 각 페이지 전환마다 서버로부터 새로운 HTML을 가져와 페이지를 로드한다.
흔히 사용되던 방식과 굉장히 유사하다.
SPA와는 반대로 초기에 전체 페이지를 로드할 필요가 없어 로딩 속도가 빠르고,
검색 엔진 최적화에도 상당히 우수한 자원을 제공한다.
다만, 페이지마다 서버 요청이 필요해 사용자 경험이 지연될 수 있다.

SEO의 차이

앞서 언급처럼 SEO는 검색 최적화 과정을 의미한다.
더 구체적으로는 SEO는 검색 엔진에서 웹 페이지를 잘 찾아서
색인하고 노출시키는 것을 의미한다.

CSR방식은 검색 엔진이 페이지의 내용을 인식하기 어렵기 때문에 SEO에 불리하지만
SSR은 서버에서 페이지를 렌더링해 검색 엔진이 쉽게 인식할 수 있기 때문에 SEO에 유리하다