[CS]서버사이드 랜더링 & 클라이언트 사이드 랜더링

☆랜더링

요청받은 내용을 브라우저 화면에 표시하는 것.

 

 

SSR(Server side Rendering)

과거에는 서버에서 모든 파일을 받아서 랜더링해서 표시.

단점은 새로운 페이지를 열 때마다, refresh 될때마다 다시 서버에서 파일을 받아오기 때문에 화면 blinking현상이 있음. 

많은 사람들이 동시에 접속해서 사용하면 server 과부화가 걸릴 수 있음.

HTML요소가 랜더링 된 후에 JS파일이 해석되기때문에 TTV(Time to View)와 TTI(Time to interact)사이의 공백이 발생할 수 있음.

장점은 HTML에 모든 정보가 들어있기 때문에 효율적인 검색엔진최적화 SEO(search Engine optimazition)가 가능. 

 

웹에서 많은 정보와 기능을 다루면서 SPA(single page application) 개념이 생겨남.

CSR(Client side rendering)

브라우저에서 랜더링 하는 방식. html파일을 먼저 가져오는데 그 안에는 자바스크립트주소, css파일주소 등이 들어있음. 그 후에 json형태의 자바스크립트를 가져와 parsing해서 화면에 표시.

Html파일이 비어있기 때문에 화면에 아무것도 나타나지 않고 JS가 파싱된 후 화면 랜더링을 실행함. 

HTML파일이 비어있기 때문에 크롤봇이 내용을 읽지 못하고 페이지 정보를 알 수 없어 SEO가 낮아짐.