전체적인 라우트 캐시 방법

전체 라우트 캐시

자동 정적 최적화(Automatic Static Optimization), 정적 사이트 생성(Static Site Generation), 정적 렌더링(Static Rendering) 이라는 용어들이 애플리케이션의 라우트를 빌드 시간에 렌더링하고 캐싱하는 프로세스를 의미하여 교차하여 사용될 수 있습니다.

Next.js는 빌드 시간에 라우트를 자동으로 렌더링하고 캐싱합니다. 이것은 모든 요청에 대해 서버에서 렌더링하는 대신 캐싱된 라우트를 제공할 수 있게 해주어 페이지 로드 속도를 빠르게 합니다.

전체 라우트 캐시가 어떻게 작동하는지 이해하려면 리액트의 렌더링 처리 방식과 Next.js가 결과를 어떻게 캐싱하는지 살펴보는 것이 도움이 됩니다.

1. 서버에서의 리액트 렌더링

서버에서 Next.js는 리액트의 API를 사용하여 렌더링을 조정합니다. 렌더링 작업은 개별 라우트 세그먼트와 Suspense 경계별로 분할됩니다.

각 청크는 두 단계로 렌더링됩니다.

1. 리액트는 서버 컴포넌트를 스트리밍에 최적화된 특별한 데이터 형식, 리액트 서버 컴포넌트 페이로드(리액트 Server Component Payload) 로 렌더링합니다.
2. Next.js는 리액트 서버 컴포넌트 페이로드와 클라이언트 컴포넌트의 JavaScript 지시문을 사용하여 서버에서 HTML을 렌더링합니다.

이는 모든 작업이 렌더링되기를 기다리지 않고도 작업을 캐싱하거나 응답을 전송할 수 있음을 의미합니다. 대신 작업이 완료될 때마다 응답을 스트림으로 전송할 수 있습니다.

2. 서버에서의 Next.js 캐싱 (전체 라우트 캐시)

Next.js의 기본 동작은 서버에서 라우트의 렌더링 결과(리액트 서버 컴포넌트 페이로드와 HTML)를 캐싱하는 것입니다. 이는 빌드 시간에 정적으로 렌더링된 라우트 또는 재검증 중에 적용됩니다.

3. 클라이언트에서의 리액트 하이드레이션 및 조정

요청 시 클라이언트에서 아래와 같이 사용됩니다.

1. HTML은 클라이언트와 서버 컴포넌트의 빠른 비대화식 초기 미리보기를 즉시 표시하는 데 사용됩니다.
2. 리액트 서버 컴포넌트 페이로드는 클라이언트와 렌더링된 서버 컴포넌트 트리를 조정하고 DOM을 업데이트하는 데 사용됩니다.
3. JavaScript 지시문은 클라이언트 컴포넌트를 하이드레이션(hydrate)하고 애플리케이션을 대화형으로 만드는 데 사용됩니다.

4. 클라이언트에서의 Next.js 캐싱 (라우터 캐시)

리액트 서버 컴포넌트 페이로드는 클라이언트 측 라우터 캐시에 저장됩니다. 개별 라우트 세그먼트별로 분할된 별도의 인메모리 캐시입니다. 이 라우터 캐시는 이전에 방문한 라우트를 저장하고 미래의 라우트를 사전 가져오기 위해 사용됩니다.

5. 후속 탐색

후속 탐색 또는 사전 가져오기 중에, Next.js는 리액트 서버 컴포넌트 페이로드가 라우터 캐시에 저장되어 있는지 확인합니다. 그렇다면, 서버에 새로운 요청을 보내는 것을 건너뛸 것입니다.

라우트 세그먼트가 캐시에 없으면, Next.js는 서버에서 리액트 서버 컴포넌트 페이로드를 가져와 클라이언트의 라우터 캐시를 채울 것입니다.

정적 및 동적 렌더링

라우트가 빌드 시간에 캐싱되는지 여부는 그것이 정적으로 또는 동적으로 렌더링되는지에 따라 다릅니다. 정적 라우트는 기본적으로 캐시되며, 동적 라우트는 요청 시 렌더링되며 캐시되지 않습니다.

이 다이어그램은 정적으로 및 동적으로 렌더링된 라우트 사이의 캐시된 데이터와 캐시되지 않은 데이터 차이를 보여줍니다.

정적 및 동적 렌더링에 대해 더 알아보십시오.

지속 시간

기본적으로 전체 라우트 캐시는 영구적입니다. 이는 렌더링 출력이 사용자 요청 간에 캐시되는 것을 의미합니다.

무효화

전체 라우트 캐시를 무효화하는 두 가지 방법이 있습니다.

1. 데이터 재검증(Revalidating Data): 데이터 캐시를 재검증하면, 서버에서 컴포넌트를 다시 렌더링하고 새로운 렌더링 출력을 캐싱하여 라우터 캐시를 무효화합니다.
2. 재배포: 데이터 캐시는 배포 간에 지속되는 반면, 전체 라우트 캐시는 새로운 배포시 초기화됩니다.

선택 해제

다음과 같은 방법으로 전체 라우트 캐시를 선택 해제하거나 다른 말로 하면 모든 들어오는 요청에 대해 컴포넌트를 동적으로 렌더링할 수 있습니다.

• 동적 함수(Dynamic Function) 사용: 이는 라우트를 전체 라우트 캐시에서 선택 해제하고 요청 시 동적으로 렌더링합니다. 데이터 캐시는 계속 사용될 수 있습니다.
• dynamic = 'force-dynamic' 또는 revalidate = 0 라우트 세그먼트 설정 옵션 사용: 이는 전체 라우트 캐시와 데이터 캐시를 모두 건너뜁니다. 이는 서버에 들어오는 모든 요청에 대해 컴포넌트를 렌더링하고 데이터를 가져오는 것을 의미합니다. 라우터 캐시는 여전히 클라이언트 측 캐시로 적용됩니다.
• 데이터 캐시 선택 해제: 라우트에 캐시되지 않은 fetch 요청이 있는 경우, 이는 라우트를 전체 라우트 캐시에서 선택 해제합니다. 특정 fetch 요청의 데이터는 모든 들어오는 요청에 대해 가져올 것입니다. 캐싱을 선택 해제하지 않는 다른 fetch 요청은 데이터 캐시에 계속 캐시됩니다. 이는 캐시된 데이터와 캐시되지 않은 데이터의 혼합을 허용합니다.