벌써 NextJs 14가 나온다고?: NextJs 14 버전 소식
안녕하세요 독자님들. 현재 국내 웹 프레임 워크 중 가장 많이 사용되는 NextJs의 새로운 버전이 나왔습니다. NextJs 14 버전에서는 어떤 변화가 있는지 같이 알아보도록 합시다. 🚀🚀
Turbocharged 컴파일러의 등장
NextJs 13 버전부터 로컬 개발 성능의 향상에 주력해왔습니다. 이를 위해 next dev와 NextJs의 다른 부분들을 재작성하는 작업을 진행했습니다. 그러나 접근 방식을 변경하여 더 점진적으로 개선하기로 결정했습니다. 이로 인해 Rust 기반의 컴파일러는 곧 안정화될 것으로 예상됩니다.
Turbopack과의 통합
Turbopack은 NextJs의 Rust 엔진입니다. 현재 next dev에 대한 5,000개의 통합 테스트가 Turbopack과 함께 통과되었습니다. 이 테스트에는 7년 동안의 버그 수정 및 재현이 포함되어 있습니다.
성능 향상
vercel.com에서의 테스트를 통해 다음과 같은 성능 향상을 확인할 수 있었습니다:
- 53.3% 빠른 로컬 서버 시작
- Fast Refresh를 사용하여 94.7% 빠른 코드 업데이트
이 벤치마크는 큰 애플리케이션과 큰 모듈 그래프를 가진 경우에 예상할 수 있는 실제 성능 향상 결과입니다.
Turbopack의 안정화
next dev에 대한 테스트가 90% 통과되면, Turbopack을 다가오는 마이너 릴리즈에서 안정 버전으로 이동시킬 계획입니다. 또한 사용자 정의 설정 및 생태계 플러그인에 대한 webpack 사용도 계속 지원할 예정입니다.
테스트 진행 상황 확인
테스트의 진행 상황은 areweturboyet.com에서 확인할 수 있습니다.
NextJs 14에서의 폼과 데이터 변형
NextJs는 프론트엔드와 백엔드의 경계를 허물며, 개발자들에게 더욱 간편하고 통합된 개발 경험을 제공하고자 합니다. NextJs 14에서는 이러한 철학을 바탕으로 여러 새로운 기능들을 도입하였습니다.
API 라우트와 폼 제출
NextJs 9에서 소개된 API Routes는 프론트엔드 코드와 함께 백엔드 엔드포인트를 빠르게 구축할 수 있는 방법입니다. 예를 들어, api/ 디렉토리에 새 파일을 생성하여 API를 구현할 수 있습니다. 그리고 클라이언트 측에서는 React와 이벤트 핸들러를 사용하여 해당 API 라우트에 fetch 요청을 할 수 있습니다.
서버 액션: 더 간단하게 데이터 변형하기
NextJs 14에서는 개발자의 데이터 변형 작성 경험을 단순화하고자 합니다. 서버 액션을 통해 API 라우트를 수동으로 생성할 필요 없이, React 컴포넌트에서 직접 서버에서 안전하게 실행되는 함수를 정의할 수 있습니다.
App Router는 React의 canary 채널에 기반하며, 이는 프레임워크가 새로운 기능을 채택하기에 안정적입니다. v14에서 Next.js는 최신 React canary로 업그레이드되었으며, 이에 안정적인 서버 액션을 포함하고 있습니다.
이전의 예제는 단 한 파일로 단순화될 수 있습니다. 서버 액션은 과거에 서버 중심 프레임워크를 사용한 경험이 있는 개발자들에게 익숙하게 느껴질 것입니다. 이는 웹의 기본 요소인 폼과 FormData Web API를 기반으로 합니다.
캐싱, 재검증, 리디렉션 등의 기능
서버 액션은 App Router 모델 전체에 깊게 통합되어 있습니다. 다음과 같은 다양한 기능을 제공합니다:
revalidatePath()또는revalidateTag()를 사용하여 캐시된 데이터 재검증redirect()를 통한 다른 라우트로의 리디렉션cookies()를 통해 쿠키 설정 및 읽기useOptimistic()를 사용하여 낙관적 UI 업데이트 처리useFormState()를 사용하여 서버에서의 오류 캐치 및 표시useFormStatus()를 사용하여 클라이언트에서의 로딩 상태 표시
NextJs 14의 부분적 사전 렌더링 (미리보기)
NextJs는 항상 프론트엔드 개발의 효율성과 성능을 향상시키기 위한 연구와 개발에 힘쓰고 있습니다. 이번에는 **부분적 사전 렌더링(Partial Prerendering)**에 대한 미리보기를 공유하고자 합니다.
부분적 사전 렌더링의 개념
부분적 사전 렌더링은 서버 사이드 렌더링(SSR), 정적 사이트 생성(SSG), 그리고 점진적 정적 재검증(ISR)에 대한 10년의 연구와 개발 위에 구축되었습니다.
동기
많은 개발자들의 피드백을 통해 현재 너무 많은 런타임, 설정 옵션, 그리고 렌더링 방법을 고려해야 한다는 문제점을 인식하게 되었습니다. 개발자들은 정적의 속도와 신뢰성을 원하면서도, 완전히 동적이고 개인화된 응답을 지원하길 원합니다.
React Suspense 기반
부분적 사전 렌더링은 React Suspense 경계에 의해 정의됩니다. 예를 들어, 다음과 같은 전자상거래 페이지를 고려해보세요:
이 페이지는 <Suspense /> 경계를 기반으로 정적 쉘을 생성합니다. React Suspense의 대체 항목이 사전 렌더링됩니다.
쉘 내의 Suspense 대체 항목은 사용자를 기반으로 한 배너나 쿠키를 읽어 장바구니를 결정하는 것과 같은 동적 컴포넌트로 대체됩니다.
요청이 이루어지면, 정적 HTML 쉘이 즉시 제공됩니다. <ShoppingCart />는 사용자 세션을 보기 위해 쿠키에서 읽기 때문에, 이 컴포넌트는 정적 쉘과 동일한 HTTP 요청의 일부로 스트리밍됩니다. 추가적인 네트워크 라운드트립은 필요하지 않습니다.
부분적 사전 렌더링은 React Suspense 경계에 의해 정의됩니다. 예를 들어, 다음과 같은 전자상거래 페이지를 고려해보세요:
export default function Page() {
return (
<main>
<header>
<h1>My Store</h1>
<Suspense fallback={<CartSkeleton />}>
<ShoppingCart />
</Suspense>
</header>
<Banner />
<Suspense fallback={<ProductListSkeleton />}>
<Recommendations />
</Suspense>
<NewProducts />
</main>
);
}
이 페이지는 <Suspense /> 경계를 기반으로 정적 쉘을 생성합니다. React Suspense의 대체 항목이 사전 렌더링됩니다.
요청이 이루어지면, 다음과 같이 정적 HTML 쉘이 즉시 제공됩니다:
<main>
<header>
<h1>My Store</h1>
<div class="cart-skeleton">
<!-- Hole -->
</div>
</header>
<div class="banner" />
<div class="product-list-skeleton">
<!-- Hole -->
</div>
<section class="new-products" />
</main>
<ShoppingCart />는 사용자 세션을 보기 위해 쿠키에서 읽기 때문에, 이 컴포넌트는 정적 쉘과 동일한 HTTP 요청의 일부로 스트리밍됩니다. 이를 위한 코드는 다음과 같습니다:
import { cookies } from 'next/headers'
export default function ShoppingCart() {
const cookieStore = cookies()
const session = cookieStore.get('session')
return ...
}
최적의 정적 쉘을 위한 방법
가장 세밀한 정적 쉘을 얻기 위해서는 추가적인 Suspense 경계를 추가할 수도 있습니다. 그러나 이미 loading.js를 사용하고 있다면, 이것은 암시적인 Suspense 경계이므로 정적 쉘을 생성하기 위해 변경이 필요하지 않을 것입니다.
NextJs 14의 메타데이터 개선
웹 페이지의 성능과 사용자 경험은 단순히 페이지의 내용만으로 결정되지 않습니다. 서버에서 페이지 콘텐츠를 스트리밍하기 전에 브라우저에 먼저 전송해야 하는 중요한 메타데이터가 있습니다.
이러한 meta 태그들이 초기 페이지 콘텐츠와 함께 전송되면 사용자 경험을 부드럽게 만들어줍니다. 이는 테마 색상 변경으로 인한 페이지의 깜빡임이나 뷰포트 변경으로 인한 레이아웃 이동을 방지합니다.
메타데이터의 분리
NextJs 14에서는 차단 메타데이터와 비차단 메타데이터를 분리하였습니다. 메타데이터 옵션 중 일부만이 차단되며, 비차단 메타데이터가 부분적으로 사전 렌더링된 페이지의 정적 쉘 제공을 방해하지 않도록 하고자 합니다.
다음 메타데이터 옵션들은 이제 deprecated로 표시되었으며, 향후 주요 버전에서 metadata에서 제거될 예정입니다:
viewport: 뷰포트의 초기 확대 및 기타 속성 설정colorScheme: 뷰포트의 지원 모드(밝음/어두움) 설정themeColor: 뷰포트 주변의 크롬이 렌더링될 색상 설정
새로운 옵션 도입
NextJs 14부터는 이러한 옵션들을 대체하기 위해 viewport 및 generateViewport라는 새로운 옵션이 도입되었습니다. 다른 모든 metadata 옵션은 동일하게 유지됩니다.
개발자들은 오늘날 이 새로운 API를 채택하기 시작할 수 있습니다. 기존의 metadata 옵션들은 계속해서 작동할 것입니다.
마치며
함께 읽으면 좋은 글
