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

342

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

13.4.3

정적 렌더링 요약

정적 렌더링은

HTML

을 빌드 시점에 생성하는 정적인 웹사이트에 매우 적합한 패턴입니다.

지금까지 다양한 정적 생성 방식을 살펴본 결과, 각각의 상황에 적합한 정적 생성 방식이 존

재했습니다.

순수 정적 렌더링

동적인 데이터가 포함되지 않은 페이지에 적합합니다.

클라이언트 사이드 데이터

fetching

을 통한 정적 렌더링

매 페이지 로드 시 데이터가 새로고침되어야 하고 안정적인

placeholder

컴포넌트를

가진 페이지에 적합합니다.

점진적 정적 생성(

ISR

)

특정 간격 또는 필요에 따라 재생성되어야 하는 페이지에 적합합니다.

On

-

demand

ISR

특정 이벤트 발생 시 재생성되어야 하는 페이지에 적합합니다.

하지만 정적 렌더링이 언제나 최선의 선택은 아닙니다. 예를 들어 사용자마다 동작이 다른

매우 동적인 개인 맞춤형 페이지에는

SSR

이 이상적입니다.

13.5

스트리밍

SSR

SSR

이나 정적 렌더링을 사용하면 자바스크립트 용량을 줄여 페이지가 상호작용 가능해지

는 시간

TTI

을

FCP

First

Contentful

Paint

에 더 가깝게 만들 수 있습니다. 여기에 스트리밍

Streaming

방식

으로 콘텐츠를 전송하면 애플리케이션을 서버에서 렌더링하면서도

TTI

와

FCP

를 더욱 단축

343

Chapter ...