Next.js 14 소개

Next.js 13이 나온 지 얼마 되지 않은 것 같은데 Next.js 14가 출시했다.

 

바뀐 내용은 아래와 같다.

 

1. Turbopack

2. Server Actions (안정화)

3. 부분 Prerendering

 

Turbopack

https://areweturboyet.com/

Are We Turbo Yet?

큰 내용은 없고 Turbopack의 진행상황을 공유해 줬는데,

위 사이트에서 Turbopack의 테스트 코드 통과율을 확인할 수 있는데 현재 대부분의 테스트 코드를 통과한 상태인데 100% 통과하면 안정화 버전으로 이동된다고 한다.

Server Actions (안정화)

https://bysxx.tistory.com/23

Next 13.4 - App Router 안정화 버전 출시 with Turbopack, Server Actions

사실 Server Actions은 이전 글에서 다룬 것과 같이 Next 13.4에서 소개됐던 내용으로 새로운 기능은 아니다.

 

Next 13.4 글에서 다룬 것처럼 Server Actions은 꽤 흥미로운 내용이다.

Server Components를 유지하며 form과 같은 이벤트를 처리할 수 있는 방법이기 때문이다.

 

이 내용은 이전 글에서 다룬 내용이기 때문에 짧게 vercel에서 올려준 예시 코드로 리뷰해 보자면

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

form action과 서버의 함수가 연결되어 있는 구조로 코드만 봐서는 큰 장점이 안 느껴질 수도 있지만,

이 기능을 server action 없이 구현하기 위해서는 api를 만들어야 하고 프론트에서는 이 api를 호출하는 코드도 만들어야 한다.

 

이 기능은 Server Components에 있어 중요한 기능이라고 생각하고 있었고,

이 기능이 안정화 버전으로 넘어왔기 때문에 나도 적극적으로 사용해 볼 계획이다.

 

부분 Preprendering

Next.js 13을 사용하다 보면 SSR, SSG 관련된 이슈와 논쟁이 많았고, Vercel도 이 문제를 파악하고 있었던 것 같다.

 

기존 Suspense를 사용하면 Suspense 내부에 비동기 컴포넌트가 들어 있으면 이 부분을 fallback으로 대체해 놓고 컴포넌트가 완성되는 대로 대체할 수 있었다.

 

이 기술 또한 Suspense를 기반으로 구축되었고, 이 경계를 통해 SSR과 SSG 각각의 이점을 살려 아래와 같은 예시처럼 Suspense 내부에 넣게 된다면, 내부에 있는 컴포넌트는 정적으로 생성된 초기 html(SSG)에는 없지만 http 요청의 일부로 스트리밍 되도록 구현 중이라고 한다.

 

export default function Page() {
  return (
    <main>
      <header>
        <h1>My Store</h1>
        <Suspense fallback={<CartSkeleton />}>
          <ShoppingCart />
        </Suspense>
      </header>
      <Banner />
      <Suspense fallback={<ProductListSkeleton />}>
        <Recommendations />
      </Suspense>
      <NewProducts />
    </main>
  );
}

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

마무리

Server Actions  안정화 버전도 좋은 소식이긴 하지만 전에 소개 됐던 내용이었기 때문에 크게 흥미롭지는 않았다.
그래서 이번 업데이트에서는 부분 Prerendering이 가장 흥미로운 내용이었고 빨리 사용해 볼 수 있으면 좋을 것 같다.