Next.js 13 변경사항 정리 (1) app 디렉토리
업데이트 변경사항
📌 app 디렉토리
app 디렉토리는 현재 베타 버젼으로 아직 프로덕션에서는 사용하지 않는 것이 좋습니다. Next.js13 은 pages 디렉토리도 제공하기 때문에 필요에 맞게 사용하시면 됩니다.
app 디렉토리는 다음과 같은 지원이 포함됩니다.
- Layouts
: 불필요한 리랜더링을 피하며 쉽게 UI 공유가 가능해집니다. - Server Components
: 기본값을 서버 우선으로 설정합니다. - Streaming
: 빠른 로딩 상태를 보여줍니다. - Support for Data Fetching
: 확장된 fetch api 로 컴포넌트 레벨의 fetching을 가능하게 합니다.
🌱 Layouts
app 디렉토리는 복잡한 인터페이스를 쉽게 배치하고 불필요한 리랜더링을 막고, 향상된 라우팅 패턴을 가능하게 합니다. 중첩 레이아웃을 작성할 수 있으며, 컴포넌트, 테스트, 스타일과 같은 경로에 어플리케이션 코드를 배치할 수 있습니다.
app/blog/layout.js
export default function BlogLayout({ children }) {
return <section>{children}</section>;
}파일 시스템을 통해 layouts을 정의할 수 있습니다. layouts은 상태를 유지하고, 리랜더링하지 않습니다.
🌱 Server Components
app 디렉토리는 리액트의 새로운 Server Components 아키텍쳐를 지원합니다. 서버컴포넌트와 클라이언트 컴포넌트는 필요에 따라 사용하시면 됩니다. 서버컴포넌트로 클라이언트에 전송되는 자바스크립트의 양을 줄임으로써 빠른 페이지 초기 로딩을 가능하게 합니다.
🌱 Streaming
app 디렉토리는 UI 단위를 점진적으로 렌더링하고 클라이언트에 점진적으로 스트림하는 기능을 도입합니다. 서버 컴포넌트와 중첩된 레이아웃을 통해 데이터가 필요하지 않은 부분을 빠르게 렌더링할 것이며 데이터를 fetching하는 곳에서는 loading 상태를 보여줍니다. 이 방법으로 유저는 interact하기 위해 전체 화면을 기다릴 필요가 없어집니다.
🌱 Data Fetching
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>;
}[ssg]
// 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' });
[ssr]
// This request should be refetched on every request.
// Similar to `getServerSideProps`.
fetch(URL, { cache: 'no-store' });
[isr]
// This request should be cached with a lifetime of 10 seconds.
// Similar to `getStaticProps` with the `revalidate` option.
fetch(URL, { next: { revalidate: 10 } });레이아웃,페이지,컴포넌트 안에서 서버로부터 streaming responses의 지원을 받으며 데이터 fetch를 할 수 있습니다.
