CSR과 SSR

SSR vs CSR

 

SSR(Server Side Rendering) :

• 웹 페이지를 서버에서 렌더링한다. 서버는 정해진 렌더링 준비가 완료된 페이지를 브라우저에 전송한다.
• 웹 페이지의 내용에 데이터베이스의 데이터가 필요한 경우, 서버는 데이터베이스의 데이터를 불러온 다음 웹 페이지를 완전히 렌더링 된 페이지로 변환한 후에 브라우저로 응답을 보낸다.
• 브라우저가 다른 경로로 이동할때마다 서버는 같은 작업을 반복한다. -> 서버 부하가 커진다.

CSR(Client Side Rendering) :

• 클라이언트에서 페이지를 렌더링한다. 
• 브라우저의 요청을 서버로 보내면 서버는 웹 페이지의 골격과 JS를 클라이언트에 보낸다. 웹 페이지와 함께 전달된 JS 파일은 브라우저에서 완전히 렌더링 된다.
• 웹 페이지에 데이터베이스의 데이터가 필요한 경우에는 API 가 사용된다. 웹 페이지를 렌더링하는데 필요한 데이터를 API 요청으로 해소한다.
• 브라우저가 다른 경로로 이동하면 서버가 웹페이지 골격을 다시 보내지 않고 브라우저가 다시 렌더링한다.
• 리액트는 CSR방식의 라이브러리이다.

 

 

차이

CSR과 SSR의 큰 차이는 페이지가 렌더링 되는 위치이다.

 

---

SEO :

검색엔진에 사용되는 자동화크롤러인데 첫 html을 호출하여 보이는 값을 크롤링한다. CSR은 첫 html이 빈페이지기 때문에 SEO에 이점이 없다.

 

SSR을 사용하는 경우

• SEO(검색엔진)가 우선순위인 경우 일반적으로 SSR을 사용한다.
• 웹 페이지가 사용자랑 상호작용이 적은 경우(강의, 신문등)
• 웹 페이지의 첫 화면 렌더링이 빠르게 필요한 경우에도, 단일 파일의 용량이 작은 SSR이 적합하다.

CSR을 사용하는 경우

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

---

https://wnsdufdl.tistory.com/325

Pre-rendering (직접 실험하면서 확인)