Next.js 13의 App Directory와 4가지 추가된 기능

Hayoiii ㅣ 2023. 5. 27. 11:22

Next.js 13 버전에서 추가된 4가지 기능

Next.js 13 버전에서는 App Directory가 추가되었다. 이전 버전에서 pages 폴더에 대응되는 것으로, 다음과 같은 기능을 지원한다.

원한다면 App Directory 내에 컴포넌트 파일, 테스트 파일, 스타일 파일 등 라우트가 아닌 파일이 존재해도 된다.
이전 버전에서 pages 폴더 안에는 무조건 NextPage Dynamic Routes만 존재해야 했던 것과 비교된다.

Support for Data Fetching: 비동기 서버 컴포넌트를 지원하며, 확장된 fetch API로 컴포넌트 레벨에서 데이터 패칭이 가능함.

Next.js 13 버전에서는 더욱 유연하고 편리한 데이터 패칭 또한 지원한다.

Layouts은 상태를 유지하면서 라우트 간에 UI를 공유할 수 있는 기능이다.

Layout은 다른 Layout으로 감쌀 수 있다. 즉, Layout 간에 계층 구조를 만들 수 있다.

여러 페이지에 걸쳐 공유되는 UI를 레이아웃으로 구현한다면 다음과 같은 이점을 얻을 수 있다.

Layouts으로 Header, Footer, Nav 등을 구현한다면 위 같은 이점을 잘 활용할 수 있을 것이다.

Next.js 13 버전에서 도입된 가장 중요한 개념이자 가장 큰 변화이다.

- 서버 컴포넌트: 서버에서 데이터를 받아와 미리 렌더링한 후 클라이언트 사이드로 전달해준다. 이렇게 하면 클라이언트 단에서 초기 로딩 시간은 줄어들고, 번들 사이즈도 감소하게 된다. 👉 주로 동적인 데이터를 다룰 때 사용

- 클라이언트 컴포넌트: 서버로부터 빈 상태만 전달받는다. 이 때는 클라이언트 사이드에서 api를 호출하여 데이터를 패칭하고 이를 렌더링한다. 👉 주로 정적인 데이터를 다룰 때 사용

Next.js는 이 두 컴포넌트를 명시적으로 분리하고 조합하여 사용할 수 있도록 한다. 어플리케이션의 요구사항에 따라 동적인 데이터와 정적인 데이터를 효율적으로 처리할 수 있게 되었다.

기존에는 페이지의 모든 데이터가 준비되기 전까지 렌더링이 되지 않는 방식이었다. 하지만 Next.js 13 버전에서는 UI 단위가 준비되는 대로 렌더링된다. (Next.js가 알아서 해준다!)

Streaming 기능은 다음과 같이 사용자 경험을 크게 향상시킬 수 있다.

13 버전에서 지원하는 fetch API는,

이를 통해 컴포넌트 간의 데이터 의존성을 더욱 세밀하게 관리하고 필요한 데이터만 패칭하므로써 성능을 최적화할 수 있다.

Next.js 13 버전에서 가장 흥미로웠던 점은, 한 페이지 내에서 SSR을 할지, CSR을 할 지를 개발자가 컴포넌트 단위로 결정할 수 있다는 점이다.

또한, Streaming 기능은 사용자 경험을 한 단계 도약해줄 것으로 기대한다. Streaming 기능이 효과적으로 동작하기 위해서는 Server Components를 적절하게 활용해야 할 것으로 추측된다.

위에 언급한 네 가지 기능 외에도 여러 성능 개선이 이루어졌다. next/image의 성능 향상, 폰트 최적화, 자동 리소스 프리패치, Rust 기반 번들러인 Turbopack 에 대해 더 알아보고 싶다.

[Typescript] 입력의 유효성을 검사하는 유틸리티 - 라이브러리 없이 간단하게 구현하기 (0)	2023.06.29
[리액트] react-router-dom v5와 v6의 구현 방법 비교 (0)	2023.05.12