[SSR] 서버사이드 렌더링

overview

서버사이드 렌더링(SSR)은 브라우저에서 전적으로 렌더링을 담당하는 클라이언트 사이드 렌더링(CSR)과는 다르게 웹 서버에서 어느 정도 완성된 HTML을 제작해서 로딩하는 방식을 의미합니다

 

기존에는 유저 인터렉션(User Interaction)이 거의 없는 스태틱 페이지(예를 들어 통계 페이지나 About 페이지 등 동적으로 페이지가 변할 일이 거의 없는 페이지)에만 주로 서버 사이드 렌더링을 사용했었습니다. 즉 극히 제한된 상황에서만 SSR을 사용했었습니다.

 

하지만, 요즘에는 렌더링 속도 개선, SEO 최적화 등 여러 가지 퍼포먼스적인 이슈들로 인해서 SSR을 UserInteraction이 많은 동적인 페이지에도 적용하고 있습니다. React - Nextjs (Vue - Nustjs) 등과 같이 SSR를 사용해서 기존 CSR의 단점을 보완할 수 있도록 구현하는 경우도 많이 있습니다.

 

SSR

https://www.growth-rocket.com/blog/a-closer-look-at-client-side-server-side-rendering/

SSR방식은 빈 HTML 파일(JS, CSS의 링크만 있는)을 전송하는 CSR과 다르게 미리 서버에서 Layout + Data Fetching을 통해 HTML을 구성합니다. 초기 페이지를 구성하는 데에 시간이 소요되므로 빈 HTML을 보내는 방식보다는 HTML Response 속도는 느립니다. 하지만 CSR에서 Javascript를 로딩하고 그 코드를 실행하는 시간보다는 훨씬 적은 시간이 소요되기 때문에 사용자에게 바로 페이지를 보여줄 수 있다는 장점이 있습니다.

 

주의할 점은 사용자에게 바로 페이지를 로딩해주지만, 이 페이지는 Interactive하지 않습니다. 페이지가 Interactive 하도록 만들기 위해서는 결국 Javascript 코드가 실행되어야 하므로 CSR과 비슷한 시간이 소요됩니다. 하지만 사용자에게 보이는 페이지 자체는 빠르게 로딩됩니다.

 

• 페이지가 더 일찍 렌더링되고 고객이 페이지를 더 빨리 볼 수 있지만 반응이 실행될 때까지 실제로 상호 작용할 수 없습니다. 고객이 정말 빠르게 버튼을 클릭해도 React가 실행될 때까지 액션이 실행되지 않습니다.
• SSR TTFB ( Time To First Byte)는 CSR보다 느립니다. 서버가 CSR처럼 빈 응답을 보내는 대신 페이지의 HTML을 작성하는 데 시간을 소비하기 때문입니다.
• 서버의 SSR 처리량은 CSR 처리량보다 훨씬 적습니다. 특히 react의 경우 처리량 영향이 매우 큽니다. ReactDOMServer.renderToString 이벤트 루프를 보유하는 동기식 CPU 바운드 호출입니다.
  이는 서버가 ReactDOMServer.renderToString 완료 될 때까지 다른 요청을 처리할 수 없음을 의미합니다. 페이지를 SSR 하는 데 500ms가 걸린다면 초당 최대 2개의 요청을 수행할 수 있습니다.

 

https://medium.com/walmartglobaltech/the-benefits-of-server-side-rendering-over-client-side-rendering-5d07ff2cefe8

 

위 캡쳐 화면을 보면 SSR이 더 빠르게 렌더링 되고 CSR을 사용하면 로드하는 동안 빈 흰색 페이지가 표시됩니다. CSR을 사용하는 대부분의 응용 프로그램은 대체로 빈 흰색 페이지를 로딩 아이콘으로 대체하지만 정상적인 작업에서 SSR 방식을 사용하다 CSR 모드로 강제 전환되면 페이지가 비어있습니다. 

 

SSR방식의 콘텐츠 로딩 과정

1. 브라우저에서 URL을 입력 -> 서버에 HTTP Request 요청
2. 서버에서 이 요청을 받아 해당 페이지를 만들기 시작
-> 이때 필요한 Data Fetching을 미리 해서(API Call, Hydrate 등) 빈 페이지가 아닌 초기 콘텐츠가 로딩된 페이지를 만들어줌
3. 브라우저가 이 HTML 페이지를 받아 페이지를 DOM에 그림 (이 시점부터 페이지가 사용자에게 보이게 됨)
4. 브라우저가 페이지를 그리면서 동시에 <limk> 태그 등을 통해 JS, CSS파일 등을 로딩
5. 로딩된 JS를 실행
6.Interactive 한 페이지 구성이 완료