JS - SSR & CSR

1. SSR

 

1. SSR 은 Sever Side Rendering 의 줄임말이다. 웹 페이지를 브라우저에서 렌더링하는 대신에, 서버에서 렌더링한다.
2. 브라우저가 서버의 URI 로 GET 요청을 보내면, 서버는 정해진 웹 페이지 파일을 브라우저로 전송한다. 그리고 서버의 웹 페이지가 브라우저에 도착하면 완전히 렌더링된다.

-----------------------------------------------------------------------------------

2. CSR

 

1. CSR 은 Client Side Rendering 을 의미한다. 일반적으로 CSR 은 SSR 의 반대로 여겨진다.
2. SSR 이 서버 측에서 페이지를 렌더링한다면, CSR 은 클라이언트에서 페이지를 렌더링한다.
3. 브라우저의 요청을 서버로 보내면 서버는 웹 페이지를 렌더링하는 대신, 웹 페이지의 골격이 될 단일 페이지를 클라이언트에 보낸다. 이 때, 서버는 웹 페이지와 함께 JS 파일을 보낸다.

-----------------------------------------------------------------------------------

3. SSR 과 CSR 의 차이

 

1. CSR 과 SSR 의 주요 차이점은 페이지가 렌더링되는 위치이다. SSR 은 서버에서 페이지를 렌더링하고, CSR 은 브라우저( 클라이언트 )에서 페이지를 렌더링한다. 브라우저는 사용자가 다른 경로를 요청할 때마다 페이지를 새로고침하지 않고, 동적으로 라우팅을 관리한다.

-----------------------------------------------------------------------------------

4. SSR 과 CSR 을 사용하는 경우

 

## SSR 을 사용하는 경우 ##

1. SEO( Search Engine Optimization )가 우선순위인 경우, 일반적으로 SSR( Sever Sider Rendering )을 사용한다.
2. 웹 페이지의 첫 화면 렌더링이 빠르게 필요한 경우에도, 단일 파일의 용량이 작은 SSR 이 적합하다.
3. 웹 페이지가 사용자와 상호작용이 적은 경우, SSR 을 활용할 수 있다.

 

## CSR 을 사용하는 경우 ##

1. SEO 가 우선순위가 아닌 경우, CSR 을 이용할 수 있다.
2. 사이트에 풍부한 상호 작용이 있는 경우,  CSR 은 빠른 라우팅으로 강력한 사용자 경험을 제공한다.
3. 웹 앱을 제작하는 경우, CSR 을 이용해 더 나은 사용자 경험( 빠른 동적 렌더링 등 )을 제공할 수 있다.