자바스크립트 + 리액트 디자인 패턴

346

자바스크립트 + 리액트 디자인 패턴

■

Angular

Universal

11

.

1

12

: 네이티브 하이브리드 렌더링을 지원하며, 정적 경로에는 사전 정적 렌더링을,

동적 경로에는

SSR

을 수행할 수 있습니다.

■

Nuxt

3

.

0

13

: 하이브리드 렌더링을 지원하기 위한 라우팅 규칙을 설정할 수 있습니다.

13.8

점진적 하이드레이션

점진적 하이드레이션은 각 노드를 시간에 따라 개별적으로 하이드레이션하여 필요한 최소한

의 자바스크립트만 요청하는 방식입니다. 이를 통해 페이지의 상대적으로 덜 중요한 부분의

하이드레이션을 지연시켜 페이지를 상호작용할 수 있게 만드는 데 필요한 자바스크립트 양

을 줄이고, 사용자에게 필요한 노드만 하이드레이션할 수 있습니다. 또한 점진적 하이드레이

션은

SSR

에서 흔히 발생하는 서버에서 렌더링된

DOM

트리가 파괴되고 즉시 다시 생성되는

문제를 방지할 수 있습니다.

점진적 하이드레이션은 애플리케이션을 여러 조각으로 나누어 뛰어난 성능을 제공하는 것

을 목표로 합니다. 더불어 사용자 경험에 미치는 영향도 고려해야 합니다. 화면의 일부가 순

차적으로 나타나면서 이미 로딩이 완료된 부분의 상호작용이나 사용자 입력을 방해해서는

안 됩니다. 이러한 면에서 완전한 점진적 하이드레이션 구현을 위한 요구사항은 다음과 같습

니다.

■ 모든 컴포넌트에 ...