CSR vs SSR 비교

CSR => Client Side Rendering

SSR => Sever Side Rendering

 

 

 

CSR

• 말 그대로 클라이언트에서 렌더링이 됩니다.
• 브라우저가 서버에게 최초 요청 시에 HTML, CSS , JS 같은 리소스를 불러옵니다.
• 그 후 브라우저는 해당 리소스를 다운받습니다. (유저는 흰 화면만 보게 됨)
• 렌더링이 완료되면 유저에게 화면을 보여줍니다.

 

 

 

SSR

• CSR과는 반대로, 서버에서 렌더링 준비를 모두 마친 파일을 클라이언트에게 보내 줍니다.
• 클라이언트에서는 즉시 렌더링 되어서 흰색 화면이 CSR보다 덜 합니다
• 그러나 js를 완전히 받기 전까지는 페이지와 상호작용은 불가능합니다.

 

 

주요 차이점

CSR은 클라이언트에서 렌더링 하고,

SSR은 서버에서 렌더링 한다!

 

 

 

CSR를 사용한다면....

1. SEO(Search Engine Optimization)가 최적화되지 않음 => 검색엔진의 검색 봇이 크롤링하는 게 어려움 (그러나 요즘은 많이 따라잡았다 함)
2. 비교적으로 서버에 요청을 적게 해서 부담 줄여줌
3. 첫 로딩이 길어짐
4. 유저와의 상호작용이 많을수록 유리함

 

 

 

SSR을 사용한다면

1. 초기 화면을 빨리 띄움
2. 유저와의 상호작용이 없다면 좋음
3. 페이지 변경시마다 서버가 다시 렌더링 해줌.