Next JS 13 revalidate

아래 작성한 예시코드와 같은 구조로 요청 시 마다 고양이에 대한 사실을 데이터로 보내주는 API 와 통신을 하였습니다.

그리고 얻은 데이터를 화면에 뿌려주는 간단한 작업을 진행하였습니다.

이후 제가 기대한 것은 revalidate로 설정한 5초가 지난 후 데이터를 요청했을 때 새로운 텍스트로 바뀐 채 화면에 뿌려지는 것이였습니다.

하지만 5초가 지난 뒤 다시 요청하였음에도 이전 데이터가 그대로 화면에 보여지게 되었습니다.

Revalidate

예시 코드

아래 코드는 Server Component에서 작성된 코드입니다.

export default async function ExampleApi() {
	const res = fetch("https://www.exampleApi.com", 
next : {
	revalidate : 5,
}
)
}

1. revalidate 옵션을 사용한 첫 번째 fetch 요청이 호출되면,
   데이터는 외부 데이터 소스에서 가져와서 데이터 캐시에 저장됩니다.

2. 지정된 시간 내에 호출된 모든 요청(예: 5초)은 캐시된 데이터를 반환합니다.

3. 시간이 경과한 후, 다음 요청은 여전히 캐시된 데이터를 반환합니다.

4. 시간이 경과하고 첫 요청이 있은 후, Next.js는 데이터를 백그라운드에서 다시 유효성을 검사하기 위해 트리거합니다.

5. 데이터가 성공적으로 가져와지면, Next.js는 최신 데이터로 데이터 캐시를 업데이트합니다.

6. 백그라운드 유효성 검사가 실패하는 경우, 이전 데이터는 변경되지 않은 상태로 유지됩니다.

"유효성 검사가 실패한다" 는 것은 외부에서 데이터를 가져올 때 네트워크 문제, 외부 api 데이터 베이스 연결 문제 등의 이유로 새로운 데이터를 가져오는 것에 실패했다는 걸 말합니다.
이 때는 이전에 캐시된 데이터를 그대로 유지하며, 설정한 주기가 지난 뒤 다시 시도하게 됩니다.

위의 코드에서 revalidate 에 대한 시간은 해당 시간이 지났을 때 데이터의 재검증이 가능해지는 시간으로 해석하면 될 것 같습니다.

장점

데이터의 업데이트가 필요한 부분만 동적으로 업데이트가 가능하기 때문에 불필요한 동작을 하지 않게 될 수 있습니다.

주의점

업데이트함에 있어 일정한 주기가 있기 때문에 실시간 정보가 아니라는 점을 생각하여, 해당 페이지에 적합한 방식인지 잘 판단할 필요가 있습니다.

사용처

30분 또는 1시간 단위로 업데이트 되는 날씨 정보
블로그 글 또는 기사와 같이 일부 정보가 업데이트 될 수 있는 게시물
홈페이지에서 제공하는 5~10분 단위로 업데이트 되는 주식의 가격.
(웹 , 앱에서 실시간 정보를 요하는 상황 x)
등

++ 추가적으로 ssg + isr 혼합해 사용한 코드입니다.

products 는 제가 직접 작성한 mock 데이터이고, CatText는 위에서 설명한 revalidate를 사용하여 5초마다 데이터를 업데이트하는 데이터를 하나의 페이지에 뿌려주었습니다.

CatText 컴포넌트 예시코드

export default async function ExampleApi() {
	const res = fetch("https://www.exampleApi.com", 
next : {
	revalidate : 5,
}
)
}

(위의 코드는 예시 코드이며, 실제 코드는 데이터 통신이 가능한 코드입니다.)