[FedEx 스터디] Next.js 13의 새로운 점

상민·2023년 4월 2일

nextjs

[FedEx] 스터디

목록 보기

8/10

Next.js 13 App Directory

Next.js 13에서는 app/ 디렉토리를 도입하여 Next.js의 라우팅 및 레이아웃 경험을 개선

레이아웃: 경로 간에 UI를 쉽게 공유할 수 있음
스트리밍: 로딩 상태를 표시하고 렌더링되는 UI 단위로 스트리밍
서버 컴포넌트
데이터 가져오기

현재 app/ 디렉토리는 베타 버전이고 pages 디렉토리와 공존할 수 있음.

점진적으로 app/ 디렉토리만 사용되는 것으로 채택될 수 있음.

Next.js 13 레이아웃

app/ 디렉토리에서 라우팅하려면 page.tsx 라는 단일 파일이 필요

layout.tsx 파일은 공용 컴포넌트 (Navbar, Footer 등..)을 배치하여 UI를 공유할 수 있음.

app/login/layout.tsx에 레이아웃 컴포넌트를 만들면 그 폴더 안에 있는 page.tsx에 레이아웃이 삽입된다.

여러 페이지에 적용하고 싶을 때는 가장 상위 폴더에 넣어주면 된다.
ex) app/website/layout.tsx에 레이아웃을 넣어두면 app/website/class/page.tsx, app/website/ticket/page.tsx 에서 모두 해당 레이아웃을 사용 가능

(components 폴더를 따로 만들지 않아도 됨.)

Next.js 13 스트리밍

app/ 파일 구조는 렌더링된 단위 별 UI를 클라이언트에 점진적으로 렌더링하고 스트리밍할 수 있는 기능을 제공한다.

Server Components 및 Next.js의 중첩 레이아웃을 사용하면, 데이터가 특별히 필요하지 않은 페이지의 일부를 즉시 렌더링하고 데이터를 가져오는(fetching) 페이지의 일부에 대한 로드 상태를 표시할 수 있다. 이 방식을 사용하면 사용자는 페이지와 상호 작용을 시작하기 전에 전체 페이지가 로드되기를 기다릴 필요가 없다.

app/login/loading.tsx 처럼 원하는 라우팅 폴더에 loading 파일을 둘 수 있다

→ 해당 컴포넌트의 콘텐츠가 로딩되는 동안 로딩 컴포넌트를 출력한다.

layout.tsx와 page.tsx 아래 하위 항목을 <Suspense>로 감싸주면 적용할 수 있다.

<Layout>
    <Header />
    <SideNav />
    <Suspense fallback={<Loading />}>
        <Page />
    </Suspense>
</Layout>

Next.js 13 데이터 가져오기

getStaticProps와 getServerSideProps가 대체되고, fetch(axios)와 react의 새로운 훅인 use을 사용해 데이터 가져오기 방식이 대체될 것.

import { use } from "react";

export default function Page() {
  // use Hook을 이용해 제공
  const name = use(getData());

  return <div>Hello World!</div>;
}

async function getData() {
  const res = await fetch("API 주소");
  const data = await res.json();
  return data;
}

또한 아래와 같이 getStaticProps / getServerSideProps에서 제공되는 캐싱 기능을 옵션으로 사용 가능

// 캐시 기능
// 디폴트 설정이며 기존의 getStaticProps 와 동일하게 동작합니다.
fetch(URL, { cache: 'force-cache' });

// 캐시 기능을 사용하지 않음
// getServerSideProps 와 동일하게 동작합니다.
fetch(URL, { cache: 'no-store' });

// revalidate 단위로 설정된 시간을 주기로 캐시합니다.
// getStaticProps에서 revalidate 옵션을 사용한 것과 동일합니다.
fetch(URL, { next: { revalidate: 10 } });