[Next] Lighthouse 를 사용한 CSR, SSR 성능 차이 비교

Next/Image를 사용하여 이미지 최적화를 하기위해 Next.js로 프로젝트를 진행하고 있지만, 게임 특성 상 Loaing  상태일 경우 loading indicator가 보여지는게 더 적합할 것 같아 프로젝트 전체적으로 CSR을 사용하고 있었다.

 

이 때, 적합한 페이지는 SSR을 적용해봐도 좋지 않을까 고민하다 상점 페이지에 SSR을 적용해본 뒤 CSR을 했을때와 어느정도의 성능 차이가 있고, 어떤 방식이 더 효율적일지 테스트를 해봐야겠다고 생각했다.

 

상점은 API에서 특히 더 많은 양의 데이터를 받고 있으며 렌더되는 이미지의 양도 많았다.

 

우선 React-Query를 사용하고 있는 환경에서 SSR을 적용하기 위해 공식문서에 나와있는 대로 SSR을 위한 초기 설정을 해주었다.

https://tanstack.com/query/v4/docs/framework/react/guides/ssr

SSR | TanStack Query React Docs

상점 페이지 접속 시, 요청에 따라 node 서버에서 HTML을 만들어 준 뒤 preFetch한 뒤 HTML을 내려주었으며, 이후 css, js파일과 함께 하이드레이션이 일어나는 것을 확인할 수 있었다.

이후 각 방식의 성능 차이를 확인하기 위해 lighthouse chrome extention을 설치해주었다.
(성능을 측정하기 위해서는 해당 페이지로 이동하여 개발자 도구를 열고 lighthouse 탭으로 이동하여 Analyze Page Load를 클릭하면 된다.)

Client Side Rendering 시의 성능지표

 

Server Side Rendering 시의 성능지표

 

확실히 초기 로드가 무거운 페이지에서 SSR시 전체적인 퍼포먼스를 포함하여

• 사용자가 특정 웹 페이지로 이동했을 때, 브라우저가 첫 번째 DOM의 콘텐츠를 렌더링하는 데 걸리는 시간
• 웹 페이지를 불러올 때, 콘텐츠가 시각적으로 표시되는 데까지 걸리는 시간
• 뷰포트에서 가장 큰 콘텐츠 요소가 화면에 렌더링 될 때까지 걸리는 시간

등에서 더 좋은 성능을 보이고있는것을 확인할 수 있었다.

 

실제 서비스에 도입을 할 지는 조금 더 고민해 볼 필요가 있을 것 같다 :)