❔ Next.js 13 변경된 내용을 알아봅시다!
❕ 라우팅 방식
: 기존의 pages 폴더 기반 파일 시스템 라우터를 app 디렉토리로 변경하여 라우팅 및 레이아웃 개선
❕ Layout
: app 디렉토리 루트의 RootLayout 필수적으로 생성 (하위에 layout.js라는 커스텀 레이아웃 파일도 생성 가능)
: 복잡한 상태를 더 쉽게 관리할 수 있고 리렌더링 방지하면서 경로간 공통 UI를 쉽게 공유할 수 있음
: 레이아웃을 중첩하거나 라우트, 컴포넌트, 테스트 및 스타일과 함께 앱 코드를 배치할 수 있음
: 여러 페이지들이 동일한 UI를 공유할 때 레이아웃 기능 사용
ex) 네비게이션에 레이아웃을 적용하면 상태를 유지하면서 상호작용을 하고 리렌더링 방지
export default function RootLayout({children}) {
return (
<html lang="en">
<body>{children}</body>
</html>
)
}❕ Server Component
: app 디렉토리 내 파일은 기본적으로 모든 컴포넌트가 서버 컴포넌트로 동작한다.
따라서 클라이언트 컴포넌트를 사용하려면 파일 상단에 'use client'라는 directive 명시해야 한다.
Server Component를 사용할 때 이점
✅ 서버 컴포넌트를 사용하면 클라이언트로 전송되는 JS 양을 줄여 초기 페이지 로드 속도를 줄일 수 있음
✅ 성능 최적화 : 렌더링하는 데 필요한 데이터만 서버에서 가져오고 이를 브라우저로 전달(로딩 속도 개선)
✅ SSR 및 SEO : 서버에서 초기 페이지 렌더링을 수행하므로 검색 엔진 최적화(SEO)와 성능 향상
✅ 실시간 업데이트 : 클라이언트 측 JS가 필요하지 않으므로 실시간 업데이트와 같은 기능을 구현하기 쉬움
✅ 경로가 로드될 때 next.js나 react 런타임이 로드되기 때문에 캐시가 가능하고 크기 예측 가능
✅ 서버측 데이터 흐름 관리 : 데이터 흐름을 더욱 효율적으로 관리
❕ Streaming app
: loading.js 파일을 생성하면 React Suspense와 함께 로딩 UI를 생성할 수 있음
✅ 페이지 내용을 로드하는 동안 서버로부터 즉시 로딩 상태를 표시하고 렌더링이 완료되면 컨텐츠 표시
✅ page.js 파일과 그 아래의 모든 파일을 자동으로 wrapping해서 원하는 로딩화면을 보여줌
✅ 렌더링된 단위 별 UI 클라이언트에 점진적으로 렌더링하고 스트리밍할 수 있는 기능 제공
✅ 페이지의 HTML을 더 작은 청크로 분할하고 서버에서 점진적으로 클라이언트로 전송
❕ Data Fetching 지원
: fetch() Web API를 사용할 수 있게 되어 컴포넌트 레벨에서도 SSR 적용 가능(중복 제거와 캐싱, 재요청 처리까지 지원)
export default async function Page() {
// This request should be cached until manually invalidated.
// Similar to `getStaticProps`.
// `force-cache` is the default and can be omitted.
const staticData = await fetch(`https://...`, { cache: 'force-cache' })
// This request should be refetched on every request.
// Similar to `getServerSideProps`.
const dynamicData = await fetch(`https://...`, { cache: 'no-store' })
// This request should be cached with a lifetime of 10 seconds.
// Similar to `getStaticProps` with the `revalidate` option.
const revalidatedData = await fetch(`https://...`, {
next: { revalidate: 10 },
})
return <div>...</div>
}❕ New next/image (stable)
✅ 레이아웃 변경 없이 이미지를 쉽게 표시하고 on-demand 방식으로 파일을 최적화하여 성능을 향상시킬 수 있는 컴포넌트 제공
✅ 클라이언트 측 JS가 더 적게 포함됨
✅ 스타일링 및 구성이 용이함
✅ 기본적으로 alt 태그를 내장하여 접근성을 향상
✅ 네이티브 lazy-loading을 사용하기 때문에 더 빠름(hydration 필요하지 않음)
❕ New @next/font(Beta)
✅ 레이아웃 이동이 필요없는 자체 호스팅 폰트 제공
✅ 커스텀 폰트를 포함하여 모든 폰트를 자동으로 최적화
✅ 개인 정보 보호 및 성능 향상을 위한 외부 네트워크 요청 제거
✅ 모든 폰트 파일에 대한 자동 self-hosting 내장
✅ CSS size-adjust 속성을 자동으로 적용
❕ 향상된 next/link
: 업데이트 된 next/link에서는 더 이상 수동으로 <a>를 하위 항목을 추가할 필요가 없음
✅ 항상 <a>를 렌더링하며 기본 태그로 props를 전달할 수 있음
import Link from 'next/link'
// Next.js 12 : '<a>' has to be nested otherwise it's excluded
<Link href="/about">
<a>About</a>
</Link>
// Next.js 13 : '<Link>' always renders '<a>'
<Link href="/about">
About
</Link>