NextJS 데이터 최신화 설정, ISR과 캐싱 전략

NextJS의 데이터 최신화

1. ISR(Incremental Static Regeneration)

ISR란? Next.js에서 제공하는 기능으로, 정적 생성과 서버 사이드 렌더링의 장점을 결합한 형태이다. ISR를 사용하면, 정적페이지를 빌드 시점에 미리 생성하고, 배포 후에도 정해진 간격으로 페이지를 업데이트 할 수 있다. 이 방법을 통해 페이지 로드 시간을 줄이고, 동시에 최신 컨텐츠를 유지할 수 있는 방법을 제공한다. 

ISR의 작동방식? 

처음으로 페이지를 빌드할 때, 모든 페이지가 정적 파일로 생성된다. 개별 페이지에 revalidate 속성을 설정하면, 해당 페이지는 정해진 시간 간격마다 재생성될 수 있다. 페이지가 재생성되는 동안, 사용자들은 여전히 이전에 생성된 정적 페이지를 보게되며, 새로운 버전의 페이지가 준비되면 다음 요청부터 새로운 페이지가 제공된다. 

사용 예 

const resp = await fetch('http://localhost:9999/topics',{next : {revalidate :10}});
const topics = await resp.json();

- 위 코드는 10초마다 해당 페이지를 업데이트하는 활용 예이다. 

ISR을 사용하면, 빌드 시점에 생성된 정적 파일을 제공하기 때문에 초기 페이지 로드 시간이 빨라진다. 또한 위와 같이 revalidat 옵션을 사용하면 정기적으로 페이지를 업데이트함으로 최신 컨텐츠를 유지할 수 있으며, 정적 파일을 제공핟기 떄문에 트래픽이 급증가해도 서버에 부담이 적은 장점이 있다. 

ISR은 페이지의 데이터가 주기적으로 변경되거나 최신 상태를 유지해야 하는 경우 성능을 향상 시키는 유용한 기능이다.

 

2. 캐싱 전략

캐싱은 컴퓨터 시스템이나 웹 애플리케이션에서 자주 사용되는 데이터를 임시 저장공간에 보관하여 빠른 데이터 접근을 가능하게 하는 기술이다. 캐싱전략은 이러한 데이터를 어떻게 효율적으로 저장하고 검색할지 결정하는 방법론을 말한다. 

Next.js에서는 cache: 'no-store'라는 특정 캐싱 전략을 사용하여 데이터의 최신성을 보장한다.  이 전략은 HTTP 헤더를 통해 구현되며, 브라우저나 중간 프록시 서버가 서버로부터의 HTTP 응답을 캐시에 저장하지 못하도록 지시한다. 즉, 이 설정을 사용하면, 각 요청 시 서버로부터 새로운 응답을 받아야 하므로, 사용자에게 항상 최신 데이터를 제공할 수 있다. 

따라서, 실시간 데이터의 업데이트가 필요한 앱에 적합하고, 캐시에 저장되는 것을 방지하기 때문에 민감한 정보를 다루는 페이지에서 보안 수준을 높이는 데 도움이 될 수 있다. 

const resp = await fetch('http://localhost:9999/topics',{cache : 'no-store'});

단, 캐싱전략은 모든 요청이 서버로 직접 전송되기 때문에 서버 부하가 증가할 수 있으며, 캐싱이 없으므로 사용자에게 데이터가 표시되기까지의 시간이 늘어날 수 있다. 따라서, 변동성이 높은 데이터나 민감한 정보를 다루는 애플리케이션에서 주의하여 사용하는 것이 좋다.