ssr!

작동

1. 클라이언트의 페이지 접속 요청 (request)
2. 서버에서 리소스 확인 후 서버측 스크립트 실행, html 컨텐츠 준비 (프론트 서버 -> 백엔드 서버로 필요한 데이터 요청 작업 및 페인팅)
3. 브라우저는 서버에서 완성된 html( 인터렉티브 하지는 않지만, 컨텐츠는 다 보이는 상태 )을 다운로드 한다.
4. 브라우저는 javascript를 다운로드 하고 실행한다. (이 때 react 같은 웹 프레임워크( 리액트는 라이브러리) 들이 실행되면서 페이지가 interactive하게 바뀐다.
5. 사용자가 페이지를 이동할 경우 위 동작 반복!

 

장점

• csr보다 클라이언트의 네트워크 환경에 영향을 덜 받음. 서버에서 완성된 페이지를 내려주기 때문에, 네트워크 요청 횟수가 적기 때문에!

 

• FP(First Painting) 및 FCP(First Contentful Paint)가 빠름

 

 

• 서버에서 사용된 자바스크립트 코드들을 클라이언트에 보내지 않아도 되므로 TTI(Time To Interaction)가 조금 더 빠름.
• SEO 최적화에 용이하다. 

 

단점

• 서버를 호스팅 해야 한다. (개발자가 관리해야 할 것이 더 늘어난다)
• 페이지 이동시마다 서버에서 페이지를 생성하는데 시간이 걸리기 때문에 TTFB(Time to First Byte)가 느리다.
• 접속자가 몰린다면 csr보다 더 느려질 수 있다. (이를 해결 하기 위해서는 서버를 여러대 운용해야 하는 문제가 생긴다)

 

* FP: 첫번째 픽셀이 스크린에 페인팅 되었을 때(시간)를 얘기한다.

* FCP: DOM에 속해있는 컨텐츠 조각이 스크린에 페인팅 되는 순간(시간)을 얘기한다.

* TTI: 페이지 로드 이후 상호작용이 가능해지기까지의 시간을 얘기한다.

* TTFB:브라우저가 페이지를 요청한 후 서버로부터 정보의 첫 번째 바이트를 수신하는 시간을 얘기한다.