[엘리님 유튜브정리] 서버사이드 렌더링

SPA : Sping Page Application 

- 서버에서 필요한 데이터만 받아와서 부분적으로 업데이트하는 방식

 

CSR : Clinet Side Rendering

- 클라이언트측에서 다 작업

- 서버에서 인덱스라는 HTML 파일을 클라이언트에 보내면 텅텅빈 HTML파일을 받아온다.

- 이 HTML팡리에 링크되어있는 javascript파일을 요청한다. -> 최종적으로 동적으로 HTML을 생성할 수 있는 웹어플리케이션 로직이 담긴 자바스크립트 파일을 담아온다. -> 이 순간 부터 웹사이트가 사용자에게 보여지고 클릭이 가능해진다.

-> TTV사용자가 웹사이트를 보는 것과 동시에 TTI 인 클릭을 하거나 인터랙션이 가능하게 된다.

- 문제점 : 사용자가 첫 화면을 보기까지 시간이 오래걸린다. 두번째로는 좋지 않은 SEO(Search Engine Optimization) => 서버에 등록된 웹사이트를 하나하나 돌아다니면서 HTML문서를 분석한다. 

- CSR에서 사용하는 HTML문서는  대부분 텅텅비어있기 때문에 검색하는데 효율이 좋지 않다.

 

CSR개발에 필요한 고민은 ? 

- 우리가 최종적으로 번들링해서 사용자에게 보내는 js파일을 어떻게 효율적으로 많이 분할해서 첫번째로 사용자가 보기위해 필요한 정말 필수적인것만 보낼 수 있는지에 대한 고민이 필요하다.

 

 

SSR : Server Side Rendering

- 웹사이트에 접속하면 서버에서 필요한 데이터를 모두 가져와서 HTML파일으 만들고 동적으로 제어할 수 있는 소스코드와 함께 클라이언트에게 보내준다. 

-> 그럼 바로 클라이언트측은 사용자에게 보여준다.

-> 최종적으로 자바스크립트 파일을 가져와야만 사용자의 클릭을 처리할 수 있는 인터랙션이 가능해진다.

-> 서버사이르 렌더링은 사용자가 서비스를 볼 수 있는 시간과 인터랙션 시간의 격차가 꽤 있는 편이다.

장점 : 첫번째 페이지를 사용자에게 빠르게 보여준다. (페이지 로딩)

모든 컨텐츠가 HTML에 담겨있기 때문에 SEO를 효율적으로 할 수 있다.

문제점

- Static site에서 발생한 블링크 문제가 발생한다(깜빡깜빡) -> 안좋은 유저 경험

- 서버 과부하 -> 사용자 클릭 -0> 서버 요청 -> 데이터 받아와서 -> html문서를 만듬

- 사용자가 빠르게 웹사이트를 빠르게 확인 -> 동적으로 처리하는 js 를 다운로드 받지 못해서 클릭은 해도 반응이 없는 경우가 있다

 

SSR개발에 필요한 고민?

- 사용자가 보고 인터랙션하는 이 시간의 단차를 줄이기 위해 어떤 노력을 할 수 있는지, 좀 더 매끄러운 UI와 UX를 제공할 수 있는지를 고민하는 것이 중요하다.

 

 

SSG : Static Site Generation

- React는 CSR이지만 Gatsby라는 것과 같이 사용하면 SSG와 같이 사용?

 

TTV : Time to View : 사용자가 서비스를 보기까지의 시간  

TTI : Time to Interact  : 사용자가 서비스를 클릭하거나 인터랙션하는데까지 시간