클라이언트 사이드 렌더링 CSR

csr의 가장 큰 장점중 하나는

유저경험적인 면에 있어서,

패스를 이동할때마다 무언가 새로 불러와지는 듯한 느낌을 덜 주고 자연스럽게 보일 수 있단 점임

 

csr의 html구조는 매우 단순하여

시작 당시엔 빈 깡통이지만

대신 자바스크립트를 이용하여 돔을 생성해줌

 

이 점을 이용하여

라우트를 이동할 때 마다 새로 서버에서 html파일을 불러오는 것이 아닌,

자바스크립트를 이용하여 필요한 부분만 돔을 새로 그려줌

 

그래서 매번 주소를 이동 시 마다

서버에서 html파일을 불러왔던 때와는 다르게

비교적 빠르게|자연스럽게 화면이동이 가능

(html을 다시 서버에서 받아올시 빈 html을 먼저 보여주기 때문에 화면이 깜박이는 듯한 효과가 있음)

---

장점도 있지만 단점도 있음

 

1. 번들링 크기

기존에는 주소이동 시 마다 필요한 HTML,JS 파일들을 가져왔다면,

CSR방식에서는 처음 애플리케이션에 진입시에 번들링(합쳐진)된 파일을 한 번에 가져옴.

그래서 처음 로딩 시에 시간이 오래 걸릴 수 있음

 

물론 특정 라우트만 번들링에서 제외시켜

해당 라우트에 진입하는 때에 받아오는 기법도 있음

=> 번들링에서 제외시키면 제외시킬수록 번들링파일의 크기가 낮아지니 초기로딩속도는 빨라짐

 

2. SEO 불리

검색엔진들이 웹사이트를 돌아다니면서 보는 부분은 HTML임

그런데 두 번째 문단에 말했듯이 

CSR방식은 보통 빈 html깡통이 먼저 있고,

자바스크립트를 이용하여 이후에 돔을 그려주는 방식임

그래서 CSR방식은 seo 면에서 불리함

 

==> 최근 몇몇 크롤러들은 js파일을 실행가능하다고 하여 csr도 해당 크롤러 대상으론 괜찮을듯