References

https://nextjs.org/blog/next-14

Turbocharged(Nextjs 컴파일러) 성능 개선

Turbopack을 통한 Nextjs의 컴파일러의 성능이 개선되었다.

local 서버 시작시 기존 대비 최대 53.3% 속도 증가
새로고침시 기존 대비 최대 94.7%의 코드 업데이트 속도 증가

다만, 아직 준비 단계 이므로 향후 안정화가 되면 정식으로 업데이트가 될 예정이라고 한다.

또한, 호환성을 위해 webpack은 계속 지원할 것이라고 한다.

Forms와 Mutations

이번 14버전을 통해 Form과 Mutations의 기능을 좀 더 단순화 했다고 한다.

Server Actions

export default function Page() {
  async function create(formData: FormData) {
    'use server';
    const id = await createItem(formData);
  }
 
  return (
    <form action={create}>
      <input type="text" name="name" />
      <button type="submit">Submit</button>
    </form>
  );
}

Page Router의 경우, React Canaries를 기반으로 구축하여 좀 더 안정적인 서버액션을 포함하는 React의 기능들을 반영하였다.
Caching, Revalidation, Redirectiong 등…
- revalidatePath() / revalidateTag()
  - 캐싱된 데이터를 재검증
- redirect()
  - 다른 경로로 리다이렉션
- cookies()
  - cookie 설정 및 읽기
- useOptimistic()
  - 능동적인 UI 업데이터 처리
- useFormState()
  - 서버의 오류 포착 및 표시
- useFormStatus()
  - 서버를 통한 클라이언트에 로딩 표시

Partial 렌더링(준비중)

기존 Nextjs의 고질적인 문제였던 SSR의 문제(Layout Shifting)에서 나온 솔루션으로

사전에 대략적인 HTML을 먼저 렌더링을 한 뒤 세부사항들을 가져오는 형식으로 성능적인 문제들을 어느정도 해결했다.

그리고 이번 14버전에서는 React의 렌더링을 최적화 하는 기능들을 도입하여 SSR에 맞게 수정했다고 한다.

React의 Suspense을 공식적으로 지원이러한 점을 두어, Suspense 기능을 사용하면 내부에서 정적 HTML Shell이 먼저 제공을 한 뒤 Stream을 통해 추가적인 정보들을 가져오게끔 구현이 되었다고 한다.

/** Suspense 사용시 먼저 정적인 HTML Shell을 제공한다. */

<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>

/** cookies라는 기능으로 streaming을 통해 ShoppingCart 컴포넌트의 내부 구성 요소를 가져온다. */

import { cookies } from 'next/headers'
 
export default function ShoppingCart() {
  const cookieStore = cookies()
  const session = cookieStore.get('session')
  return ...
}

/** cookies라는 기능으로 streaming을 통해 ShoppingCart 컴포넌트의 내부 구성 요소를 가져온다. */

import { cookies } from 'next/headers'
 
export default function ShoppingCart() {
  const cookieStore = cookies()
  const session = cookieStore.get('session')
  return ...
}

Metadata 개선

페이지의 내용들을 SSR하기 위해 필요한 Metadata들을 꾸미는 기능들이 강력해졌다.

또한, 차단 및 비차단 메타데이터를 분리하여 비차단 메타이터가 Partial 렌더링 된 페이지에 정적 HTML Shell을 제공하는데에 지장을 주지 않도록 개선이 된다고 한다.

다만, 아래의 Metadata의 옵션은 더 이상 사용되지 않아 향 후 버전에서 삭제된다.

viewport
- viewport의 초기 확대 및 축소와 기타 속성들을 설정
colorScheme
- viewport의 지원 모드(light / dark)를 설정
themeColor
- viewport 주변의 클라이언트(Chrome)가 렌더링해야 하는 색상을 설정

대신, 향후 generateViewport라는 기능을 통해 보다 통합된 Metadata의 옵션들을 다룰 예정이라고 한다.

저작자표시