theinnovatorsNext.js 15는 React 19을 지원하며, 서버 중심 렌더링(SSR)과 React Server Components(RSC)를 강화하는 방향으로 발전했다.
이번 업데이트는 비동기 API 변경, 캐싱 정책 개편, Turbopack 안정화 등 여러 핵심 기술 변화를 포함하고 있으며, 프론트엔드 개발 환경에서 더 나은 성능과 개발자 경험을 제공하기 위한 중요한 전환점이 될 것으로 보인다.
Next.js 15의 주요 기술 변화
비동기 API 변경
기존 Next.js에서 동기적으로 제공되던 API들이 비동기(async) 함수로 변경되었다.
이로 인해 서버에서 데이터를 더 빠르고 효율적으로 처리할 수 있도록 최적화되었다.
변경된 주요 API
headers(),cookies(),params(),searchParams()→ 비동기(async) API로 변경됨
// Next.js 14
import { cookies } from "next/headers";
export function getCookie() {
const cookie = cookies().get("token");
return cookie;
// Next.js 15
import { cookies } from "next/headers";
export async function getCookie() {
const cookie = await cookies().get("token");
return cookie;
}
- Next.js 15에서는 서버 측 API 호출이 비동기적으로 작동하여 성능 최적화 가능
- 비동기 데이터 처리가 기본이 되어, 더 빠른 응답 시간과 확장성 제공
기본 캐싱 정책 변경
Next.js 15에서는 fetch() 요청과 GET 라우트 핸들러의 기본 캐싱 정책이 변경되었다.
기본적으로 캐싱되지 않으며, 개발자가 명시적으로 캐싱을 설정해야 한다.
기존 방식 (Next.js 14 이하, 기본적으로 캐싱됨)
const response = await fetch("<https://api.example.com/data>");
const data = await response.json();
변경 후 (Next.js 15, 기본적으로 캐싱되지 않음)
const response = await fetch("<https://api.example.com/data>", {
cache: "no-store", // 기본적으로 캐싱 안 함
});
const data = await response.json();
의미:
- 이전에는 기본적으로 캐싱되었으나, 이제는 명시적으로 설정해야 함
cache: "no-store"를 추가해야 항상 최신 데이터를 가져올 수 있음revalidate옵션을 활용해 주기적인 데이터 갱신 가능
Turbopack Dev 안정화
Turbopack은 Webpack을 대체할 차세대 번들러로, Next.js 15에서 더욱 안정화되었다.
- 기존 Webpack 대비 최대 10배 빠른 개발 환경 제공
- 핫 리로딩 속도 개선 → 개발 생산성 증가
의미:
- Next.js 15에서 Turbopack이 더욱 안정화되면서 대규모 프로젝트에서도 성능 최적화
- 개발자의 빌드 및 번들링 속도를 크게 향상시키는 역할 수행
오약하면,
- 기존 CSR 기반의 개발 방식에서 SSR 및 RSC 중심으로 데이터 처리가 이동
- 비동기 API 변경 및 캐싱 정책 개편으로 더 효율적인 서버-클라이언트 데이터 전송 가능
- Turbopack 안정화 및 React 19 지원을 통해 더 빠른 개발 환경 조성
이 가능하도록 업데이트 되었다.
Add comment