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

333

Chapter 13_

렌더링 패턴

부분 하이드레이션

Partial

Hydration

클라이언트에서 일부 컴포넌트만 하이드레이션합니다. (예: 리액트

서버 컴포넌트 및

Gatsby

)

점진적 하이드레이션

Progressive

Hydration

클라이언트에서 컴포넌트 하이드레이션 순서를 제어합니다.

아일랜드 아키텍처

Islands

Architecture

정적인 사이트 내에 여러 진입점을 가진 동적인 동작의 격리된 영역

을 만듭니다. (예:

Astro

,

Eleventy

)

점진적 향상

Progressive

Enhancement

자바스크립트 없이도 애플리케이션이 작동하도록 보장합니다.

이번 장에서는 다양한 렌더링 패턴을 소개하고, 주어진 요구사항에 가장 적합한 패턴을 선택

하는 데 도움을 드리고자 합니다. 다음과 같은 근본적인 질문에 대한 해답을 찾을 수 있을 것

입니다.

■ 콘텐츠를 어디에서 어떻게 렌더링할 것인가?

■ 웹 서버, 빌드 서버, 엣지

edge

네트워크 또는 클라이언트, 어디에서 콘텐츠를 렌더링할 것인가?

■ 콘텐츠를 한 번에, 부분적으로, 또는 점진적으로 어떻게 렌더링할 것인가?

13.1

렌더링 패턴의 중요성

주어진 상황에 가장 적합한 렌더링 패턴을 선택하는 것은 개발 팀을 위한 개발 경험

DX

과 최종

사용자를 위한 사용자 경험

UX

에 엄청난 차이를 만들 수 ...