Next JS 13은 이전 버전과 비교하여 많은 개선 사항이 있다. 몇 가지 주요 업데이트를 살펴보자.

1. app/ Directory (beta)

초반에 Next JS 에서 가장 각광받았던 것은 next js 만의 파일 시스템 구조였다. pages 하위에 페이지들을 구성하고, _app 과 _document 등을 이용해서 해당 파일들의 레이아웃들을 잡아주었다. 하지만! 이제는 pages 가 없어졌다.

정확히 말하자면 pages 대신 app 디렉토리가 베이스 디렉토리가 된다. 이는 React Server Components 와 새롭게 생기는 Data fetching 기능, 그리고 Streaming등을 유연하게 지원하게 하기 위함이다. 하지만 디렉토리를 한번에 바꾸는 것은 대규모 프로젝트에서는 꽤나 큰 리스크이기 때문에 pages 기반의 구조도 당분간은 동시 지원해줄 것 같다.

2. Data Fetching

그리고 이것은 앞서 변경사항 목록에 없는 내용인데, nextJS 에서 지원하는 SSR data fetching 방식이 바뀐다. getServersideProps, getStaticProps, getInitialProps 모두 nextJS 가 SSR 과 CSR 을 자유롭게 넘나드면서 사용할 수 있게 해주는 키 포인트였지만, 이 방식도 바뀌게 되었다.

async function getData() {
  const res = await fetch('<https://api.example.com/>...');
  // The return value is *not* serialized
  // You can return Date, Map, Set, etc.
  return res.json();
}

// This is an async Server Component
export default async function Page() {
  const data = await getData();

  return <main>{/* ... */}</main>;
}

기존에는 useEffect 에서 data를 fetch해 오고, 그 데이터를 특정 state에 저장하는 방식을 많이 사용했다. 하지만 위 방식을 보면 그냥 컴퍼넌트 로직에서 바로 await으로 data 를 가져오고 있고, 화면에 data의 내용을 그리게된다. 그렇다면 일반적으로는 CSR로 동작한다고 생각하겠지만 Next JS 13 에서 새로 지원하는 방식에서는 그렇지 않다. 위는 SSR 단계에서 fetch 가 이루어지게된다.

// This request should be cached until manually invalidated.
// Similar to `getStaticProps`.
// `force-cache` is the default and can be omitted.
fetch(URL, { cache: 'force-cache' });

// This request should be refetched on every request.
// Similar to `getServerSideProps`.
fetch(URL, { cache: 'no-store' });

// This request should be cached with a lifetime of 10 seconds.
// Similar to `getStaticProps` with the `revalidate` option.
fetch(URL, { next: { revalidate: 10 } });

다음과 같이 fetch 에 3가지 옵션이 도입됐다.

• { cache: 'force-cache' } : build시에 가져온 데이터가 사용되고 직접 revalidate하기 전까지는 데이터가 캐싱되는 방식(빌드 시점에서 데이터를 불러오고 클라이언트가 재실행되지 않으므로 빌드 당시의 데이터를 유지한다.). getStaticProps와 같다. 그리고 이 옵션은 fetch 의 default 옵션이므로 위 예시도 이 방식으로 적용된다. 주로 정적인 콘텐츠를 생성해야 하는 페이지에 사용된다. 예를 들어, 블로그 포스트, 제품 목록 등은 자주 변경되지 않고 정적으로 생성될 수 있는 경우에 적합하다. (SSG, Static Site Generation) ⇒ 즉, 빌드 당시의 데이터가 유지되므로 새로고침을 해도 서버에서 데이터를 가져오지 않는다.
• { cache: 'no-store' } : 매 요청시마다 새로 fetch하게 된다. 서버 단에서 말이다. getServerSideProps와 유사하다. 동적인 콘텐츠가 필요하거나 매 요청마다 데이터가 변경되는 페이지에 사용된다. 예를 들어 로그인한 사용자의 개인 정보를 보여주는 페이지는 항상 최신 정보를 반영해야 하므로 서버 측 렌더링이 필요한 경우가 있다. ⇒ 즉, 페이지를 요청할 때마다 서버에서 데이터를 가져와서 페이지를 렌더링한다.
• { next: { revalidate: 10 } } : next 옵션을 줌으로서, cache 돼고있는 data 들을 revalidate 시킬 수 있다. 값은 초 단위를 의미하며, 이 예시에서는 10을 줬으니 10초마다 캐시가 지워질 것이고 새롭게 갱신된 데이터로 새로 캐싱된다.

이 방식이 가능해진 이유도, 서버 컴퍼넌트와 클라이언트 컴퍼넌트가 나뉘었기 때문이다. 이 구조에 적응만 한다면 한결 편해질 것 같다!