JavaScript 디자인 패턴 학습, 제 2판

13장. 렌더링 패턴

이 작품은 AI를 사용하여 번역되었습니다. 여러분의 피드백과 의견을 환영합니다: [e-mail]

더 많은 대화형 웹 사이트( )로 전환하면서 처리되는 이벤트의 수와 클라이언트 측에서 렌더링되는 콘텐츠의 양이 증가하여 React.js의 경우처럼 주로 클라이언트에서 렌더링되는 SPA가 발생했습니다.

그러나 웹 페이지는 제공하는 기능에 따라 정적이거나 동적일 수 있습니다. 예를 들어 서버에서 생성하여 클라이언트에 그대로 푸시할 수 있는 블로그/뉴스 페이지와 같은 정적 콘텐츠를 웹에서 계속 많이 제공하고 있습니다. 정적 콘텐츠는 상태가 없고 이벤트를 발생시키지 않으며 렌더링 후 재수정이 필요하지 않습니다. 반대로 동적 콘텐츠(버튼, 필터, 검색창)는 렌더링 후 해당 이벤트에 다시 연결해야 합니다. DOM은 클라이언트 측에서 다시 생성해야 합니다(가상 DOM). 이러한 재생성, 재수화 및 이벤트 처리 기능은 클라이언트로 전송되는 JavaScript에 기여합니다.

렌더링 패턴은 주어진 사용 사례에 맞는 콘텐츠를 렌더링하는 데 이상적인 솔루션을 제공합니다. 이 표의 렌더링 패턴은 널리 사용되는 패턴입니다:

렌더링 패턴
클라이언트 측 렌더링(CSR)	HTML은 클라이언트에서 완전히 렌더링됩니다.
서버 측 렌더링(SSR)	서버에서 HTML 콘텐츠를 동적으로 렌더링한 후 클라이언트에서 다시 렌더링하기
정적 렌더링	빌드 시점에 서버에서 페이지를 렌더링하는 정적 사이트 구축
점진적 정적 생성	초기 빌드 후에도 정적 사이트를 동적으로 보강하거나 수정할 수 있는 기능(Next.js ISR, Gatsby DSG)
스트리밍 SSR	서버 렌더링 콘텐츠를 더 작은 스트리밍 청크로 나누기
엣지 렌더링	렌더링된 HTML을 클라이언트로 전송하기 전에 엣지에서 변경하기
하이브리드 렌더링	빌드 시간, 서버 및 클라이언트 렌더링을 결합하여 웹 개발에 대한 보다 유연한 접근 방식을 만듭니다(예: React 서버 컴포넌트 및 Next.js 앱 라우터).
부분 수분 공급	클라이언트에서 일부 컴포넌트만 수화(예: React 서버 컴포넌트 및 개츠비)
점진적인 수분 공급	클라이언트에서 컴포넌트 수화 순서 제어하기
아일랜드 아키텍처	정적인 사이트에 여러 진입점이 있는 동적 동작의 고립된 섬(Astro, Eleveny)
점진적 개선	JavaScript 없이도 앱이 작동하는지 확인하기

이 장에서는 이러한 렌더링 패턴 중 일부를 소개하며 필요에 가장 적합한 패턴을 결정하는 데 도움이 됩니다. 다음과 같은 기본적인 결정을 내리는 데 도움이 됩니다:

• 콘텐츠를 렌더링하는 방법과 위치는 어디인가요?

• 콘텐츠를 웹 서버에서 렌더링해야 할까요, 빌드 서버에서 렌더링해야 할까요, 엣지 네트워크에서 렌더링해야 할까요, 아니면 클라이언트에서 직접 렌더링해야 할까요?

• 콘텐츠를 한 번에 모두 렌더링해야 하나요, 부분적으로 렌더링해야 하나요, 아니면 점진적으로 렌더링해야 하나요?

렌더링 패턴의 ...