[ZIMZIM] 클라이언트 컴포넌트와 서버 컴포넌트의 성능 차이는 얼마나 날까?

클라이언트 컴포넌트로 되어있던 것 중 서버컴포넌트로 변경하면 좋을 것을 선별했다.

그 중 하나는 대시보드 페이지였다. 대시보드 페이지에는 총 3개의 차트가 있었고 클릭하면 다른 페이지로 이동하는것 외에는 다른 사용자와의 상호작용이 없었기 때문에 서버컴포넌트로 변경했다.

 

next.js에서는 이렇게 사용자와의 상호작용이 적고 데이터를 보여줄 경우 서버컴포넌트로 구현할 것을 권장하는데 왜일까 그 이유를 생각해봤다. 미리 데이터를 받아와 사용자에게 보여줄 수 있다는 점에서 권장하는것 같아 대시보드페이지에서 차트들을 클라이언트 컴포넌트, 서버컴포넌트일 때 Lighthouse에서 측정했다.

클라이언트 컴포넌트 결과

 

클라이언트 컴포넌트 결과

 

서버 컴포넌트

서버 컴포넌트

 

클라이언트 컴포넌트와 서버컴포넌트를 비교했을 때 성능은 +2점, FCP(Fist Contnetful Paint) +0.3초, LCP(Largest Cotentful Paint) -0.5초, TBT(Total Blocking TIme) 동일, Culmulative Layout shift +0.021, Speed Index -0.1초로 나타났다.

 

클라이언트 컴포넌트보다 서버컴포넌트가 중요한 컨텐츠가 더 빨리 표시되었고, 서버컴포넌트가 0.1초정도 빠르게 시각적으로 완성되는지를 나타냈다.

 

두 컴포넌트에서 동일하게 보였던 문제점은 폰트의 렌더링 지연이 있었다. 이 부분을 개선하기 위해 next.js 공식 문서를 참고했고 다시 성능 측정을 했다.

 

 

폰트 개선으로 First Contentful Paint가 0.3초 감소되었다.

 

 

사용자 경험 측면에서는 조금 더 빨리 화면이 나타나는 것이 좋은 경험이 될 수 있기 때문에 대시보드는 서버컴포넌트로 변경해 둘 예정이다.

추후에도 서버컴포넌트로 만드는 것이 좋다는 것이 판단되면 그렇게 만들 예정이다.