게으른 하중 및 응용 수화 수화 수화는 복잡하고 종종 상충되는 방식으로 상호 작용합니다. 주로 수화로 인해 응용 프로그램 코드를 간절히 실행해야하므로 게으른 하중의 이점을 손상시킵니다.
수화가 작동하는 방법과 게으른 하중에 미치는 영향
수화는 이벤트 리스너를 첨부하고 구성 요소 상태를 복원하고 페이지를 대화식으로 만들기 위해 JavaScript를 실행하여 클라이언트 측에서 서버 렌더링 된 HTML 페이지가 "활성화"되는 프로세스입니다. 이 프로세스에는 루트에서 시작하여 응용 프로그램 구성 요소를 실행하고 구성 요소 트리를 통과하여 상태, 바인딩 및 이벤트 처리기를 이해하는 것이 포함됩니다.
수화는 전류 렌더 트리의 모든 구성 요소를 방문하여 대화식이어야하는지 확인해야하므로 이러한 모든 구성 요소를 간절히로드하고 실행하도록 강요합니다. 이는 게으른 하중에 대한 일부 구성 요소를 표시하더라도 초기 렌더 트리의 일부인 경우 수화로 인해 즉시로드됩니다. 수화는 순차적이며 중간 구성 요소를 건너 뛰기 위해 아동 성분을 직접 수화시킬 수 없으므로 모든 부모 구성 요소가 먼저 수화되어야합니다 [1] [6].
왜 수화가 게으른 하중을 방해 하는가
- 열심 인 실행 : 수화는 렌더 트리의 모든 구성 요소를 실행해야하므로 게으른 하중이 이러한 구성 요소에 대한 코드 로딩을 연기하는 것을 방지합니다.
- 구성 요소 종속성 : 아동 구성 요소는 부모 구성 요소의 소품에 의존하므로 부모는 먼저 수분을 공급하여 열망하는 하중 체인을 강요해야합니다.
- 이벤트 핸들러 및 상태 : Hydration은 또한 구성 요소 코드를 선불로 실행 해야하는 이벤트 리스너 및 복원 상태를 설정해야합니다.
- 개발자 부담 : 수화 중에 게으른 하중을 달성하려면 개발자는 수동으로 프리 페치 및 코드 분할을 관리해야하며, 이는 복잡하고 오류가 발생할 수 있습니다 [6] [7].
게으른 하중이 수화에도 불구하고 작동 할 때
게으른 하중은 여전히 초기 렌더 트리의 일부가 아닌 수화 중에 방문하지 않는 구성 요소에 여전히 효과적 일 수 있습니다. 예제는 다음과 같습니다.
- 사용자 상호 작용에 열리는 대화 상자 또는 모달
- 처음에는 렌더링되지 않은 다른 경로의 구성 요소
이 경우, 수화로 인해 즉각적인 실행을 강요하지 않기 때문에 구성 요소는 진정으로 게으른로드 될 수 있습니다 [6].
수화 및 게으른 하중을 최적화하는기술
일부 현대 프레임 워크 및 라이브러리는 게으른 수화 또는 선택적 수화를 구현 하여이 상호 작용을 최적화하려고 시도합니다. 여기서 뷰포트에서 볼 수있는 것과 같이 필요할 때만 부품이 수화됩니다.
-JS의 'Next-Lazy-Hydration-on-Scroll`와 같은 라이브러리는 구성 요소가 볼 때까지 수화를 연기 할 수 있습니다.
- IntersectionObserver API를 사용하면 구성 요소가 뷰포트에 들어갈 때만 게으른로드 및 수화 될 수 있습니다.
-Vue/Nuxt에서 게으른 수화 기술 및 플러그인 (예 : 'Nuxt-Lazy-Hydrate`) 메인 스레드가 유휴 상태가 될 때까지 수화가 지연되거나 구성 요소가 보이기 때문에 대화식 시간을 개선하고 첫 번째 입력 지연 메트릭 [4] [5].
요약
수화 및 게으른 하중은 수화로 인해 렌더 트리에서 구성 요소의 열렬한 실행이 필요하기 때문에 기본적으로 상충됩니다. 이는 게으른 하중이 코드 실행을 연기하는 것을 방지합니다. 그러나 게으른 하중은 초기 수화 범위 외부의 구성 요소에 여전히 효과적입니다. 게으른 수화와 같은 새로운 기술은 수화 자체를 연기하고 성능 및 사용자 경험을 향상시킴으로써 이러한 갈등을 조정하는 것을 목표로합니다.
본질적으로, 수화는 초기 페이지로드 동안 게으른로드를 방해하지만 신중한 건축 선택과 특수 도구를 통해 개발자는 게으른 하중의 이점을 회복하기 위해 구성 요소를 수화시기시기와 방법을 최적화 할 수 있습니다 [1] [6] [7].
인용 :
[1] https://www.infoq.com/presentations/hydration-lazy-loading/
[2] https://qconsf.com/presentation/oct2023/hydration-and-lazy-loading-are-incatible
[3] https://github.com/vercel/next.js/discussions/29751
[4] https://www.wisp.blog/blog/lazy-loading-in-nextjs-future-of-resource-optiomation
[5] https://vueschool.io/articles/vuejs-tutorials/lazy-hydration-and-server-components-in-nuxt-vue-js-3-performance/
[6] https://www.builder.io/blog/hydration-sabotages-lazy-loading
[7] https://www.linkedin.com/posts/misko-hevery-3883b1_lazy-loading-is-like-exercise-everyone-says-activity-7115086933935984641-5oxk
[8] https://www.techtarget.com/searchsoftwarequality/definition/lazy-loading