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

340

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

할 위치를 미리 지정할 수 있습니다. 그런 다음 페이지가 로드된 후

SWR

07

을 사용하여

데이터를 가져옵니다.

Stale

-

While

-

Revalidate

패턴에서 영감을 얻은

SWR

은 클라이

언트 사이드에서 데이터

fetching

을 위한 리액트

Hook

라이브러리입니다.

SWR

은 정

의된

API

를 사용하여

CMS

에서 데이터를 가져와 반환합니다. 사용자가 페이지를 요청

하면 미리 생성된

HTML

파일이 클라이언트에 전송됩니다. 사용자는 처음에 데이터가

없는 뼈대

UI

를 보게 됩니다. 클라이언트는

API

에서 데이터를 가져오고 응답을 받은 후

리스트를 표시합니다.

정적 렌더링의 주요 특징은 다음과 같습니다.

■

HTML

은 빌드 시점에 생성됩니다.

■

CDN

이나

Vercel

의 엣지 네트워크를 통해 쉽게 캐싱할 수 있습니다.

■ 순수 정적 렌더링은 요청 기반 데이터가 필요하지 않은 페이지에 가장 적합합니다.

■ 클라이언트 사이드 데이터

fetching

을 통한 정적 렌더링은 매 페이지 로드 시 새로고침되어야 하고 안정적

인

placeholder

컴포넌트에 포함된 데이터가 있는 페이지에 가장 적합합니다.

13.4.1

점진적 정적 생성(

ISR

)

점진적 정적 생성

Incremental

Static

Regeneration

(

ISR

)은 정적 렌더링과 ...