Next.js 12, 13

요즘 Next.js에 관심이 많아졌는데, next12 버전의 페이지 라우터와 next13의 앱 라우터 모두 찍먹해보았다 !

12버전에서 13버전으로 릴리즈되면서 폴더 구조가 많이 바뀌었는데, 처음에 아주 헷갈렸다 ! (이 부분도 추후에 작성해놓아야겠다.)

또 12버전의 getServerSideProps와 getStaticProps 함수도 완벽하게 정복 못한채로 13버전을 맞이하게 되었다 .......

13버전에서는 사용하지 않는다고 하던데, 그래도 정확한 개념은 알고 넘어가야 할 것 같아서 기록해 놓으려 한다 !

next13에서는 data fetching을 할 때 저 두 함수 대신 fetch API 를 사용하면 된다고 한다.

// 직접 무효화 하기 전까지는 이 request는 캐싱됨.
// `getStaticProps`와 비슷! (즉, 빌드 시점에 fetch)
// `force-cache`가 디폴트 값이므로 생략 가능
fetch(URL, { cache: 'force-cache' });

// 매번 요청 때마다 refetch 됨.
// `getServerSideProps`와 비슷!
fetch(URL, { cache: 'no-store' });

// 이 request는 10초동안 캐싱됨.
// This request should be cached with a lifetime of 10 seconds.
// `revalidate` 옵션을 지정한 `getStaticProps`와 비슷!
fetch(URL, { next: { revalidate: 10 } });

훨씬 직관적이어진 것 같다.
또 공식 문서에서 서버 컴포넌트니, 클라이언트 컴포넌트니 구분하여 작성하는걸 권장한다고 하던데 이 부분도 추후에 개념 정리를 해놓아야겠다 :)