Next.js에서는 fetch의 사용을 권장한다. 그 이유는 데이터 캐싱 기능을 자동으로 적용시켜주시 때문에 다른 데이터를 호출하는 것에 비해 성능면에서 뛰어나기 때문이다.
먼저 함수에 async를 걸어주고 fetch를 불러오면된다.
export default async fntion MyComponent(){
const MyDat = await fetch("url", {option});
}해당 방식으로 호출해주면 된다.
근데 여기서 중요한 점은 axios의 경우 JSON 처리를 해주지 않아도 되지만 fetch로 불러오는 데이터는 JSON 변환을 해주어야한다. 이는 데이터를 불러오는 과정에서 보여주는 걸로 하고 Next에서 지원하는 기능에 대한 알아보자
- cache 옵션 설정
1.
fetch("url", {cache: 'force-cache' | 'no-store'});데이터 캐시에서 일치하는 요청을 찾는다
- 일치하고 최신일 경우 > 캐시에서 반환해준다.
- 일치 x, 오래된 경울 > 원격 서버에서 리소스를 가져오고 캐시에 저장하지 않는다
2.
fetch("url", {next:{revalidate: false | 0 | number}});리소스의 캐시 수명을 설정한다.
- false : 리소를 무기한 캐시한다. HTTP 캐시는 시간이 지남에 따라 오래된 리소스를 제거할 수 있다.
- 0 : 리소스가 캐시되는 것을 방지한다.
- number : 리소스 캐시 수명이 최대 n초임을 지정한다.
알아둘만한 것
- 개별 fetch 요청이 경로의 기본값보다 낮은 숫자로 수명을 설정하며 전체 경로의 재검증 시간으 줄어든다.
- 동일한 경로, 동일한 url을 사용할때 revaildate 값이 더 낮은 값을 사용한다.
- 옵션이 충돌하면 에러가 발생한다.
ex) {revaildate : 0, cache: force-cache}, {revaildate: 10, cache: no-store}
위의 내용에서 '리소스를 캐시한다'라는 문장에서 캐시란 무엇일까?
먼저 리소스에 대해 알아야한다.
리소스 : HTTP에서 리소스란 웹 브라우저가 HTTP 요청으로 가져올 수 있는 모든 종류의 파일을 말한다.
위와 같은 리소스를 미리 복사해 저장해 놓는 임시 저장소가 바로 cache이다.
이러한 캐시를 통해 이전에 불러온 리소스를 다시 불러오기 전에 캐시에서 탐색하여 해당 리소스가 존재한다면 다시 불러오지 않고 캐시에서 꺼내 사용한다. 이 방식을 통해 데이터 페칭 과정을 줄여 성능 및 효율성을 높일 수 있는 것이다.