Waylog Blog

Next.js 15 미리보기: 서버 컴포넌트의 진화와 하이드레이션

React

웹 개발의 표준을 이끌어가고 있는 Next.js가 또 한 번의 도약을 준비하고 있습니다. Next.js 15(가칭)에서 기대되는 변화들은 단순히 성능을 조금 올리는 수준이 아니라, 우리가 생각하는 "서버 사이드 렌더링"의 개념을 한 단계 더 확장시킬 것입니다. 특히 React 19의 정식 릴리즈와 맞물려 더욱 강력해질 서버 액션(Server Actions)과 부분적 사전 렌더링(Partial Prerendering, PPR)에 대해 심층 분석해 봅니다.

Next.js Evolution

1. 컴파일러의 혁신: Turbopack의 역습

Next.js 14에서 실험적이었던 Turbopack이 15에서는 기본 엔진으로 자리 잡을 전망입니다. Rust로 작성된 이 번들러는 기존 Webpack 대비 최대 700배 빠르다고 주장합니다.

1.1 HMR(Hot Module Replacement)의 실시간화

대규모 프로젝트에서 코드 한 줄 고치고 브라우저 새로고침을 기다리던 고통은 이제 없습니다. Turbopack은 의존성 그래프를 매우 영리하게 캐싱하여 0.1초 이내에 변경 사항을 반영합니다. 이는 개발자 경험(DX)을 극대화하여 생산성을 비약적으로 높여줍니다.

2. Partial Prerendering (PPR): 정적과 동적의 완벽한 조화

지금까지 우리는 페이지 단위로 렌더링 전략을 선택해야 했습니다. generateStaticParams를 쓰면 정적(SSG), 헤더나 쿠키를 쓰면 동적(SSR). 하지만 한 페이지 안에서도 정적인 부분(사이드바, 로고)과 동적인 부분(장바구니, 개인화 추천)이 섞여 있습니다.

2.1 스트리밍의 기본값화

PPR은 페이지의 정적인 껍데기(Shell)를 즉시 제공하고, 동적인 알맹이는 스트리밍으로 채워 넣는 방식입니다.

<Suspense fallback={<Skeleton />}>
  <DynamicCart />
</Suspense>

이 코드가 동작하는 방식이 근본적으로 바뀝니다. 빌드 타임에 <Suspense> 바깥쪽은 미리 HTML로 만들어두고, 안쪽만 런타임에 서버에서 계산합니다. 즉, SSG의 초기 속도와 SSR의 최신 데이터라는 두 마리 토끼를 동시에 잡는 기술입니다.

3. Server Actions의 안정화와 보안 강화

API 라우트를 별도로 만들지 않고 함수 하나로 백엔드 로직을 처리하는 Server Actions가 더욱 성숙해졌습니다.

3.1 타입 안전성(Type Safety)의 끝판왕

클라이언트에서 서버 함수를 호출할 때 인자와 반환값의 타입이 자동으로 추론됩니다. tRPC 같은 라이브러리 없이도 완벽한 End-to-End 타입 안전성을 보장받을 수 있습니다.

3.2 폼(Form) 처리의 진화

React 19의 useFormStatus, useFormState 훅과 결합하여, 자바스크립트가 비활성화된 환경에서도 동작하는 견고한 폼을 아주 쉽게 만들 수 있습니다.

// app/actions.ts
'use server'
export async function createTodo(prevState: any, formData: FormData) {
  const title = formData.get('title');
  await db.todo.create({ data: { title } });
  revalidatePath('/todos');
  return { message: '생성 완료' };
}

이 단순한 코드가 프로그레시브 인핸스먼트(Progressive Enhancement)를 완벽하게 지원합니다.

4. 캐싱 전략의 세분화 (Granular Caching)

Next.js 13/14의 가장 큰 불만 중 하나는 "너무 과격한 캐싱"이었습니다. fetch 요청이 기본적으로 무한정 캐싱되어 데이터가 갱신되지 않는 문제가 빈번했습니다.

4.1 'use cache' 디렉티브

React 컴포넌트나 함수 레벨에서 'use cache'를 선언하여 캐싱 범위를 직관적으로 제어할 수 있게 될 것입니다. 더 이상 복잡한 revalidateTag나 cache: 'no-store' 옵션과 씨름하지 않아도 됩니다. 우리가 원하는 것은 "적당히 빠르고, 적당히 최신인" 데이터니까요.

5. 마치며: 프레임워크의 진화가 우리에게 주는 의미

Next.js 15는 단순히 기능을 덕지덕지 붙이는 것이 아니라, **"웹 개발의 복잡성을 플랫폼 내부로 숨기고, 개발자는 비즈니스 로직에만 집중하게 만든다"**는 철학을 완성해가고 있습니다. 우리는 이제 인프라 설정이나 번들러 튜닝보다는, "사용자에게 어떤 가치를 줄 것인가"에 더 많은 시간을 쏟을 수 있게 되었습니다. 다가올 15 버전을 미리 준비하며, 더 나은 웹을 만들 준비를 하십시오.