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

 

Next13(fetch, middleware)를 작성하던 중 Next 13.4 출시와 함께 App Router 안정화 버전 출시 소식이 들려왔다.

이와 함께 Turbopack은 Alpha -> Beta로 넘어왔고,

Server Actions라는 개념이 새로 생겼다.

---

App Router

App Router에서는 바뀐 폴더 구조와 함께 Layout, Server Components, Streaming이라는 개념에 대한 이해가 필요하다.

 

아래 글들에서 App Router에서 이해가 필요한 내용에 대해 소개했기 때문에 아래 글에서 확인해 보면 될 것 같다

Layout, Server Components

Streaming

---

Turbopack (Alpha -> Beta)

Turbopack에 대해 다뤄본 적이 없기 때문에 간단히 다뤄보면,

 

Turbopack은 Rust 기반의 번들러로 아래와 같은 성능을 보인다고 한다.

번들링이 빠르기로 유명한 Vite의 10배, 기존에 가장 많이 사용되는 Webpack의 700배의 속도를 보인다고 한다.

 

Next 13 초기에는 이런저런 버그들이 많아 사용하지 않고 있었는데,

오래 사용해보지는 않았지만 현재는 많이 개선된 것 같다.

 

사용법은 너무 간단하게 build, dev에 --turbo 옵션을 추가해 주면 된다.

사용해 보면 초기 스타트와, 업데이트 속도가 엄청 빠른 걸 느낄 수 있긴 하다.

 

하지만 아직 Webpack을 완전히 대체할 수는 없다고 하기 때문에 사용하기에는 무리가 있는 것 같다.

그래도 성능을 보았을 때 안정화 버전이 나온다면 사용하지 않을 이유가 없을 것 같다.

---

Server Actions (Alpha)

Vercel에서는 Server Actions는 Uncontrolled Component이 권장되는 form state를 만들기 위해 좋은 기능이라고 소개한다.

 

Uncontrolled Component란?

function form() {
  const [id, setId] = useState('');

  const onSubmit = (e: FormEvent) => {
    e.preventDefault();
  };

  return (
    <form onSubmit={onSubmit}>
      <input type="text" placeholder="Enter Name" value={id} onChange={(e) => setId(e.target.value)} />
      <button>login</button>
    </form>
  );
}

위와 같은 코드처럼 form을 state, event를 통해 제어하는 경우를 Controlled Component라고 한다

 

function form() {
  const inputRef = useRef<HTMLInputElement>(null);

  const onSubmit = (e: FormEvent) => {
    e.preventDefault();

    if (inputRef.current) {
      const id = inputRef.current.value;
      console.log(id);
    }
  };

  return (
    <form onSubmit={onSubmit}>
      <input type="text" placeholder="Enter Id" ref={inputRef} />
      <button>login</button>
    </form>
  );
}

위와 같이 state로 관리하지 않고 ref를 통해 제어해 불필요한 렌더링을 제어할 수 있다.

 

form component를 만들 때 실시간으로 값이 필요할 때는 Controlled Component를 권장하지만,

그렇지 않은 경우에는 일반적으로 Uncontrolled Component를 권장한다.

 

그렇다면 Server Actions는 어떤 걸까

async function serverAction(formData: FormData) {
  'use server';

  console.log('id', formData.get('id'));
  console.log('pw', formData.get('pw'));
}

export default function ServerActionForm() {
  return (
    <div className="mx-auto flex flex-col items-center gap-y-2 rounded-lg bg-white p-4 shadow-lg">
      <form action={serverAction} className="flex flex-col gap-y-2">
        <input type="text" name="id" placeholder="ID" className="border border-solid p-2" />
        <input type="password" name="pw" placeholder="PW" className="border border-solid p-2" />
        <button className="border border-solid p-2">Login</button>
      </form>
    </div>
  );
}

바로 위 구조가 이번에 새로 생긴 개념인 ServerAction이다.

관련코드 (https://github.com/bysxx/next13-ts-template-tailwind/blob/feature/next13.4/app/example/components/server-action-form.tsx)

 

언뜻 보기에는 별거 없어 보일 수도 있지만 이 컴포넌트가 ServerComponents라는 점을 생각해 보면 놀랄 수 있다.

 

중간 api를 만들지 않고 ServerComponents를 유지하면서,

form을 사용할 수 있는 문법이 바로 ServerAction이다.

 

ServerComponents를 유지하기 때문에 db update 등 다양한 기능들을 직접 붙일 수 있다는 장점이 있다. 

 

Next13을 사용하다보면 상호작용이 들어가는 경우 ServerComponents를 사용할 수 없는 경우가 많다.

하지만 ServerActions라는 기능이 생긴다면 일부분은 ServerComponents를 유지하면서 다양한 기능들을 만들 수 있을 것이라는 생각이 든다.

 

app router의 안정화 버전 출시를 여태 기다렸지만 또 ServerActions의 안정화버전 출시를 또 기다리게 될 것 같다 ㅠ