기타 (Others)/IT 트렌드 (IT Trends)

[NEWS] Next.Js 15 RC: 웹 애플리케이션 개발의 혁신

vanillinav 2024. 8. 14. 23:16
728x90
반응형
원문 출처: Mitali Shah의 글 및 Next.js 15 공식 블로그 포스트
이 글은 원문을 번역한 것입니다.

 

NextJS 15의 Release Candidate(RC) 버전이 공개되었습니다. 이번 RC는 웹 애플리케이션의 개발 경험과 성능을 크게 향상시키기 위해 다양한 기능과 개선 사항을 도입하고 있으며, 이러한 기능을 정식 릴리스 전에 테스트할 수 있는 기회를 제공합니다. 이번 릴리스는 특히 React 19 RC 지원, 부분적 프리렌더링(Partial Prerendering, PPR), 새로운 API 및 캐싱 전략의 변화 등 혁신적인 기능을 포함하고 있습니다.

NextJS란?

Next.js는 ReactJS 라이브러리를 기반으로 한 오픈 소스 웹 개발 프레임워크로, 서버사이드 렌더링(SSR), 정적 사이트 생성(SSG), 증분 정적 재생성(ISR), 간소화된 라우팅, 이미지 최적화, 코드 분할, 미들웨어 등과 같은 기능을 통해 고성능, 확장 가능한 애플리케이션을 개발할 수 있게 해줍니다. Vercel이 개발 및 유지 관리하는 Next.js는 표준 구조와 내장 솔루션을 제공하여 개발자가 도구를 구성하는 대신 React로 코드를 작성하는 데 집중할 수 있도록 돕습니다.

NextJS 15 RC의 주요 업데이트

React 19 RC 및 React Compiler 지원

Next.js 15 RC는 React 19 RC와 React 팀이 실험적으로 개발한 새로운 React Compiler를 완전히 지원합니다. React Compiler는 JavaScript와 React의 규칙을 깊이 이해하여 코드에 자동으로 최적화를 추가할 수 있으며, 이를 통해 개발자가 useMemo, useCallback과 같은 수동 메모이제이션의 필요성을 줄여 코드의 유지보수를 쉽게 만들고 오류 가능성을 줄입니다.
컴파일러를 사용하려면 babel-plugin-react-compiler를 설치하고 next.config.js 파일에 experimental.reactCompiler 옵션을 추가해야 합니다:

npm install babel-plugin-react-compiler
const nextConfig = {
  experimental: {
    reactCompiler: true,
  },
};

module.exports = nextConfig;

하이드레이션 오류 개선

하이드레이션 오류는 서버에서 렌더링된 콘텐츠와 클라이언트에서 렌더링된 콘텐츠 간의 불일치로 인해 발생합니다. Next.js 14.1에서 이미 개선되었지만, Next.js 15에서는 이를 더욱 강화하여 오류 메시지에 소스 코드와 해결 방법에 대한 제안을 포함하여 디버깅이 훨씬 수월해졌습니다.

캐싱 전략 개편

Next.js 15에서는 fetch 요청, GET 라우트 핸들러, 클라이언트 사이드 내비게이션이 더 이상 기본적으로 캐시되지 않습니다. 이는 데이터를 최신 상태로 유지하여 사용자에게 오래된 정보를 제공할 가능성을 줄입니다. 필요한 경우 cache: 'force-cache' 옵션을 사용하여 특정 요청에 대해 캐싱을 활성화할 수 있습니다:

fetch('https://...', { cache: 'force-cache' });

부분적 프리렌더링(Partial Prerendering, PPR) 도입 (실험적)

PPR은 동적 UI 컴포넌트를 Suspense 경계로 감싸고, 특정 레이아웃과 페이지에 대해 부분적 프리렌더링을 선택할 수 있는 기능입니다. 이는 정적 HTML 셸을 즉시 제공한 후 동적 부분을 동일한 HTTP 요청에서 렌더링하고 스트리밍하여, 동적 렌더링의 장점을 유지하면서도 정적 렌더링의 성능 이점을 누릴 수 있습니다.

const nextConfig = {
  experimental: {
    ppr: 'incremental',
  },
};

module.exports = nextConfig;
import { Suspense } from "react"
import { StaticComponent, DynamicComponent } from "@/app/ui"
 
export const experimental_ppr = true
 
export default function Page() {
  return {
     <>
	     <StaticComponent />
	     <Suspense fallback={...}>
		     <DynamicComponent />
	     </Suspense>
     </>
  };
}

next/after API (실험적)

next/after API는 응답이 완료된 후 코드를 실행할 수 있는 새로운 실험적 기능입니다. 이는 주 응답을 차단하지 않고 로깅, 분석, 외부 시스템 동기화와 같은 보조 작업을 수행할 수 있게 해줍니다.

import { unstable_after as after } from 'next/server';

export default function Layout({ children }) {
  after(() => {
    console.log('응답 스트리밍 완료');
  });
  return <>{children}</>;
}

create-next-app 업데이트 및 Turbopack 지원

create-next-app 도구는 새로운 디자인으로 업데이트되었으며, Turbopack을 로컬 개발에 사용할 수 있는 플래그가 추가되었습니다.

✔ Would you like to use Turbopack for next dev? … No / Yes
npx create-next-app@rc --turbo

이제 불필요한 파일을 제거하여 "Hello World" 페이지로 시작하는 --empty 플래그도 제공됩니다:

npx create-next-app@rc --empty

외부 패키지 번들링 최적화(Stable)

외부 패키지를 번들링하면 애플리케이션의 콜드 스타트 성능을 향상시킬 수 있습니다. Next.js 15에서는 App Router에서 외부 패키지가 기본적으로 번들링되며, 필요에 따라 특정 패키지를 번들링에서 제외할 수 있는 serverExternalPackages 옵션이 도입되었습니다.

const nextConfig = {
  // Automatically bundle external packages in the Pages Router:
  bundlePagesRouterDependencies: true,
  // Opt specific packages out of bundling for both App and Pages Router:
  serverExternalPackages: ['package-name'],
};
 
module.exports = nextConfig;

결론

Next.js 15 Release Candidate는 웹 애플리케이션 개발의 새로운 가능성을 열어줍니다. React 19 RC 지원, 새로운 캐싱 전략, 부분적 프리렌더링, 및 개발자 경험 향상 등 Next.js 15 RC에서 도입된 기능들을 통해, 고성능의 동적 웹 애플리케이션을 보다 쉽게 구축할 수 있습니다.
이번 RC는 공식 릴리스 전에 새로운 기능을 실험하고 테스트할 수 있는 기회를 제공하며, 앞으로의 Next.js 개발의 미래를 위한 토대를 마련하고 있습니다.

원문 출처: Mitali Shah의 글 및 Next.js 15 공식 블로그 포스트.

728x90
반응형