Next14 업데이트 (feat. 나는 Next14가 필요한가?)

오늘은 Next.14 업데이트에서 변경된 사항에 대해 알아보고, 제 개인적인 상황에 빗대어 Next 14 업데이트가 유용하게 적용될지 이야기 해 보도록 해보겠습니다.

Next14 업데이트에서 주요 변경 사항은 크게 3가지로 나뉠 수 있습니다.

• Metadata Improvements (메타데이터 개선)
• Server Action Stabilization (서버 액션 안정화)
• Turbopack (터보팩)

Next 개발진이 가장 강조했던 사항은 Turbopack이었지만, 이번 글은 저에게 와 닿았던 순서인 Metadata Improvements > Server Action Stabilization > Turbopack 순서로 작성하도록 하겠습니다. 또한 글의 마지막에 아직 시험 단계인 Partial Prerendering에 대해서도 짧게 이야기해보도록 하겠습니다.

Metadata Improvements

viewport, colorScheme, themeColor 등 사용자 경험과 연관있는 몇몇 메타데이터 옵션들의 작성 방식이 변경되었습니다.

viewport, themeColor와 같은 일부 메타데이터는 사용자 경험에 직접적인 영향을 미칩니다. 이러한 메타데이터를 서버 페이지 콘텐츠 응답의 후반부에 받게 된다면 viewport 변경으로 인한 layout shift, theme 변경으로 인한 깜빡임들이 발생할 수 있고 이는 사용자 경험에 나쁜 영향을 미치게 됩니다. 따라서 사용자 경험과 연관된 메타데이터는 초기 응답 콘텐츠와 함께 보내야 할 필요가 있습니다.

이에 viewport, colorScheme, themeColor 세 옵션을 작성할 수 있는 새로운 방식인 viewport, generateViewport 기능을 도입했습니다. 기존의 메타데이터에서 세 옵션을 작성하는 것은 더 이상 사용되지 않는 것을 권장하며, 조만간 major 업데이트를 통해 완전히 사라질 예정입니다.

이전 작성 방식

// 이전 metadata 옵션 작성 방식
export const metadata: Metadata = {
	...,
	viewport : {
		width : 'device-width',
		initialScale : 1,
	},
};

새로운 작성 방식

// viewport를 이용한 새로운 작성 방식
import type { Viewport } from 'next'
 
export const viewport: Viewport = {
  themeColor: 'black',
}
 
export default function Page() {}

새로운 작성 방식인 viewport, generateViewort에 대해 더 자세히 알고 싶다면? (클릭)

Server Action Stablization

서버 액션이 안정화되었습니다.

서버 액션이란 클라이언트에서 next 서버에서 실행될 함수를 정의하고, 이를 React 컴포넌트에서 직접 호출할 수 있는 기능을 의미합니다.

서버 액션은 네트워크 왕복 단계를 줄일 수 있다는 장점이 있습니다. 기존 클라이언트 → next 서버 → 외부 서버 로 구성된 네트워크 왕복 단계를 next 서버 → 외부 서버로 줄일 수 있게 되고, 이를 통해 느린 네트워크에서도 클라이언트에게 올바른 데이터를 보여줄 수 있게 됩니다.

서버 액션은 다음과 같이 실행할 함수 블럭의 최상단에 "use server"를 명시하여 사용할 수 있습니다. 또한 반드시 form 요소과 함께 사용할 필요 없이, 직접 함수를 호출하는 방식으로도 사용할 수도 있습니다.

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>
  );
}

서버 액션은 과거 Next9 버전에서부터 제공되었지만, 해당 기능을 이용하기 위해선 next.config.js를 이용해 serverAction 옵션을 true로 명시하는 작업이 필요했습니다. 하지만 이제 Next14에서부터는 따로 옵션을 설정할 필요 없이 기본적으로 사용이 가능합니다!

// next.config.js
...
experimental: {
	serverAcitons : true // 14버전 이후로는 해당 옵션을 명시할 필요 없음
},
...

또한 서버 액션은 App Router Model과 깊이 통합되어 있어 caching, revalidating, redirecting등의 기능을 함께 이용할 수 있습니다. 하단 이미지에서 명시된 기능들을 포함하여 Server Action과 Mutation에 관해서는 다음 기회에 따로 자세히 알아보도록 하겠습니다.

Server Actions에 대해 더 자세히 알고 싶다면? (클릭)

Turbopack

Turbopack을 이용하여 로컬 개발 환경을 실행하는 성능이 크게 개선되었습니다.

Turbopack을 이용했을 때, 로컬 서버를 시작하기까지의 속도가 53.3% 빨라졌으며, 변경된 코드 반영 속도가 94.7% 빨라졌습니다.

다만 위의 측정 지표는 vercel.com 애플리케이션에 대해 측정한 지표입니다. vercel.com이라는 대형 next.js 애플리케이션에서 위와 같이 성능이 향상된 만큼, 타 대형 next.js 애플리케이션에서도 비슷한 성능 향상이 예상된다고 주장하네요.
즉 Turbopack을 이용한 성능 향상은 본인의 앱이 대형 애플리케이션일 때 더 의미 있을 것 같습니다.

덧붙여, 조만간 Turbopack이 안정화(stable) 될 예정입니다.

현재 Turbopack에 대한 테스트 항목는 약 5000개로, 7년간 쌓아온 버그와 버그 발생 환경 재현 등이 포함되어 있습니다. 이러한 테스트들은 현재 약 90%가 통과되었으며, 100%가 통과된다면 다음 minor 업데이트를 통해 Turbopack이 안정화 될 예정입니다.

Turbopack이 안정화 된 이후에도 webpack에 대한 지원도 계속 될 예정입니다.

Turbopack에 대해 더 자세히 알고 싶다면? (클릭)

Turbopack의 테스트들에 대한 통과 상황은 [areweturboyet.com](https://areweturboyet.com/)에서 확인할 수 있습니다. 글 작성 시간 기준 5990개의 테스트 중 단 2개만이 남았네요 🫢. (DEV 버전 기준)

Partial Prerendering

부분 사전 랜더링과 관련된 컴파일러 최적화 작업이 진행되고 있습니다.

이 작업은 개발자들이 새로운 API를 배울 필요 없이 적용 가능하도록 하는 것을 목표로 하고 있습니다. 이를 위해 React Suspense를 경계를 이용하는 방식으로 기능을 구현 중 입니다.

부분 사전 랜더링 기능은 아직은 시험 단계이고 정식으로 안정화가 안된 만큼, 추후 안정화된 업데이트가 있을 때 자세히 알아보도록 하겠습니다.

마무리 하며

이번 글에서는 Next14에서의 변경점에 대해 알아 보았습니다.

결론

알아본 결과, Next 14 업데이트는 크게 아래에 해당하는 분들에 한해 유의미한 업데이트가 될 것 같습니다.

• Metadata로 인해 사용자 경험 측면에서 불편함을 느꼈던 개발자
• 서버 액션을 사용할 용의가 있는 개발자
• Next.js를 통해 대형 애플리케이션을 구축한 개발자

나는 Next14가 필요한가?

결론부터 이야기하면, 반드시 필요하다고는 느끼지 못했습니다.

현재 저는 사이드 프로젝트를 진행 중입니다. 따라서 서비스가 크지 않기 때문에 Next14의 Turbopack 개선은 크게 다가오지 못했습니다.

하지만 서버 액션의 안정화와 해당 기능을 App Router Model과 크게 연관하여 Caching, Revalidating, Redirecting 기능을 사용할 수 있는 것은 매력적으로 다가왔습니다.

현재는 사이드 프로젝트는 서버 상태를 react-query를 이용하여 관리하고 있는데, 다음 글에서는 next14의 server action과 react-query를 비교하며 서버 상태 관리에 어느 것이 더 적합한지 알아본다면, 생각이 바뀔 수도 있을 것 같습니다.

사실,

전 이미 사이드 프로젝트에 Next14 버전을 사용하고 있습니다 😂. 처음 프로젝트를 할 때는 Next14가 최신 버전이니까 좋겠지라는 안일한 생각으로 이용했습니다. 하지만 오늘 처럼 버전 별 특징에 대해 자세히 알아본 결과, 다음에 기술을 선택할 때는 해당 기술을 사용하는 이유에 대해서 한번 더 고민 하는 시간을 가지는 것이 필요하다는 것을 배웠습니다.

이번 글에서는 Next14 업데이트의 주요 변경 사항과, 그 과정에서 느낀 제 개인적인 생각을 좀 길게 써 보았습니다. 긴 글 읽어주셔서 감사합니다 : )