Hydration의 단점과 개선 방법 프리뷰

[CrewDaniel]

아래 목차로 발표를 진행할 예정입니다!

SSR의 페이지 로드 과정

SSR의 문제점

• 처음 화면을 보여주는 시간은 빠르지만, 상호작용에 걸리는 시간은 오래걸림!

Hydration 과정에 대해

CSR과 SSR

• 간단하게만 짚고 넘어가겠습니다.

페이지를 상호작용하게 만드는 방법(hydration)

• DOM과 이벤트 핸들러 연결
  
• 상태 갱신
  
• 갱신된 상태 정보 렌더링

hydration에서 성능 저하 요인

JS 다운로드 (어떤 것을 다운로드하는지?)

• 이벤트 핸들러(동작 코드)
  • 클로저로, 앱과 프레임워크의 상태 정보를 담고 있음
  • 어떤 이벤트인지, 이벤트 핸들러가 어떤 DOM에 부착되는지

JS 실행(어떤 것들이 실행되어야 하는지?)

• 클라이언트 컴포넌트의 중복된 실행
  • SSR 과정에서 JS 코드를 실행하는데, 이에 대한 정보가 클라이언트로 넘어올 때 전혀 저장되지 않음!!
  • SSR 과정에서 JS 코드를 실행한 결과, Context를 함께 전송해서 JS 코드를 줄여 다운로드와 실행 비용을 줄이는 방법이 필요함

Hydration 성능 개선 방법

Next.js Suspense

• 페이지에서 데이터 페칭이 필요해 추가적인 시간이 필요한 부분은 렌더링과 인터랙션을 미룸

Qwik 프레임워크에서 사용하는 방법

• SSR 과정에서 결정된 초기 상태 등을 JSON으로 포함해 클라이언트에 전송. JS로 전송해 다시 실행과정을 거치는 것보다 빠름

• 이벤트 핸들러 코드는 HTML 렌더 트리에 포함. 스크립트에서 직접 DOM을 찾는 것보다 빠르고, JS 코드를 포함하지 않아 로드 시간 단축. 이벤트 발생시에 해당 JS 코드를 로드함

두 방식의 성능 비교

[ed-jinyoung-park]

이벤트 핸들러 코드는 HTML 렌더 트리에 포함. 스크립트에서 직접 DOM을 찾는 것보다 빠르고, JS 코드를 포함하지 않아 로드 시간 단축. 이벤트 발생시에 해당 JS 코드를 로드함

Q. 이벤트 발생시에 JS 코드를 dynamic import로 로드하는 시간 자체가 길어지는 이슈는 없을까요?