🎈 Chapter 9: 리액트 서버 컴포넌트

RSC(React Server Component)는 서버에서 "실행"되는 새로운 종류의 컴포넌트로, 클라이언트 자바스크립트 번들에 포함되지 않습니다. 이 컴포넌트는 빌드 시점에 실행될 수 있기 때문에 파일 시스템에서 데이터를 읽거나 정적 콘텐츠를 가져오거나 데이터 레이어에 접근하는 등의 작업이 가능합니다. 서버 컴포넌트에서 데이터를 브라우저 환경에 있는 클라이언트 컴포넌트의 프롭으로 전달함으로써 매우 효울적이고 성능이 뛰어난 애플리케이션을 작성할 수 있습니다.

서버 컴포넌트는 서버에서만 실행되는 특수한 종류의 컴포넌트를 일컫습니다. 새로운 형태의 이 컴포넌트를 더 잘 이해하려면 먼저 리액트 컴포넌트가 리액트 엘리먼트를 반환하는 함수일 뿐이라는 사실을 기억해야 합니다. 모든 컴포넌트는 가상 DOM인 리액트 엘리먼트를 반환합니다.
서버 컴포넌트도 마찬가지입니다. 서버나 클라이언트에서 실행된 Component는 가상 DOM을 반환합니다.

장점

우리가 계산 능력을 제어할 수 있는 서버에서만 실행됩니다. 예측하기 어려운 클라이언트 기기에서 실행되는 것이 아니기 때문에 성능을 더 잘 예측하게 됩니다.
안전한 서버 환경에서 실행되므로 토큰과 같은 민감한 정보가 유출될 걱정 없이 서버 컴포넌트에서 안전하게 작업을 수행할 수 있습니다.
서버 컴포넌트는 비동기로 동작할 수 있습니다. 따라서 네트워크를 통해 클라이언트로 전송하기 전에 서버 컴포넌트의 동작이 완료될 때까지 기다릴 수 있습니다.

서버 렌더링

기본적으로 서버 컴포넌트와 서버 렌더링을 두 개의 독립적인 프로세스로 생각할 수 있습니다.
한 프로세스는 서버에서 컴포넌트를 렌더링한 후 리액트 엘리먼트 트리를 생성합니다. 또 다른 프로세스인 서버 렌더러는 이렇게 생성된 리액트 엘리먼트 트리를 마크업으로 변환합니다. 변환된 마크업은 네트워크를 통해 클라이언트에 스트리밍됩니다.

컴포넌트를 리액트 엘리먼트로 렌더링하는 프로세스와 리액트 엘리먼트를 HTML 문자열이나 스트림으로 렌더링하는 프로세스라는 점을 고려하면 이 두 개념이 어떻게 함께 동작하게 되는지 짐작할 수 있습니다. 서버 컴포넌트를 리액트 엘리먼트의 트리로 바꾸는 첫 번째 프로세스를 RSC 렌더러라고 하고, 리액트 엘리먼트를 HTML 스트림으로 바꾸는 두 번째 프로세스를 서버 렌더러라고 하겠습니다.

서버 컴포넌트와 서버 렌더링의 상호 작용을 다음과 같이 이해할 수 있습니다.

서버에서 JSX 트리는 엘리먼트 트리로 변환합니다.
그런 다음, 서버는 이 엘리먼트 트리를 문자열이나 스트림으로 직렬화합니다.
문자열로 변환된 JSON 객체가 클라이언트로 전송됩니다.
클라이언트 측의 리액트는 JSON 문자열을 파싱해 읽고 평소와 다름없이 렌더링합니다.

이를 서버 코드로 설명하면 다음과 같습니다.

// server.js
const express = require("express");
const path = require("path");
const react = require("react");
const ReactDOMServer = require("react-dom/server");
const App = require("./src/App");

const app = express();

app.use(express.static(path.join(__dirname, "build")));

app.get("*", (req, res) => {
  // 비법 소스 부분
  const rscTree = await turnServerComponentsIntoTreeOfElements(<App />);
  // 비법 소스 부분 끝

  // 비동기로 동작한 서버 컴포넌트를 문자열로 렌더링
  const html = ReactDOMServer.renderToString(rscTree);

  // 전송
  res.send(`
    <!DOCTYPE html>
    <html>
      <head>
        <title>예시 리액트 애플리케이션</title>
      </head>
      <body>
        <div id="root">${html}</div>
        <script src="/static/js/main.js"></script>
      </body>
    </html>
  `);
});

app.listen(3000, () => {
  console.log("Server listening on port 3000");
})

논리적으로 서버 컴포넌트와 서버 렌더링은 서로 보완적인 프로세스이므로 굉장히 잘 어울립니다.

내부 구조

turnServerComponentsIntoTreeOfElements는 리액트 렌더러의 한 종류입니다. <App />과 같은 상위 단계에서 시작해 재귀적으로 컴포넌트를 호출하고, 여기서 반환되는 리액트 엘리먼트(즉, 자바스크립트 객체)를 가져옵니다.

다음과 같은 리액트 엘리먼트가 있다고 가정해 봅시다.

<div>안녕!</div>

이 엘리먼트의 자식인 "안녕!"은 문자열일 뿐입니다. 이 문자열을 서버 컴포넌트 렌더러에 전달하면 문자열을 그대로 반환합니다. 이 동작의 핵심은 클라이언트에 있는 리액트와 서버에 있는 리액트가 모두 이해할 수 있는 데이터를 반환하는 것입니다. 리액트는 클라이언트와 서버에서 모두 문자열, 숫자, 불리언 값을 이해하고 렌더링할 수 있으므로 문자열은 그대로 두어도 됩니다.

배열이 전달된다면 배열의 map을 실행하고 함수를 실행해 재귀적으로 배열의 각 엘리먼트를 처리합니다. 배열은 다음과 같이 여러 개의 자식 엘리먼트로 구성될 수 있습니다.

[
  <div>hi</div>,
  <h1>hello</h1>,
  <span>love u</span>,
  (prop) => <p id={props.id}>lorem ipsum</p>,
];

다음은 객체를 처리하는 단계입니다. 모든 리액트 엘리먼트는 객체지만, 모든 객체가 리액트 엘리먼트는 아닙니다. 리액트 엘리먼트는 $$typeOf 속성을 지니며, 속성의 값은 Symbol.for('react.element')입니다. 따라서 이 속성과 속성의 값이 일치하는지 확인하고, 이를 만족한다면 리액트 엘리먼트로 취급합니다.
리액트 엘리먼트는 string, function 두가지 타입으로 표현됩니다. "div", "span" 등의 내장 DOM 엘리먼트에는 문자열이 사용되고, 사용자가 작성한 <Footer />와 같은 컴포넌트에는 함수가 사용됩니다.

문자열 타입이라면, 내장된 DOM 엘리먼트이기 때문에 그대로 반환합니다. 다만, 자식으로 동시성 리액트 컴포넌트가 포함될 수도 있으므로 재귀적으로 프롭에 대해 함수를 호출해 처리합니다.
함수 타입이라면, 사용자가 작성한 컴포넌트를 나타내는 것이므로 해당 컴포넌트를 프롭과 함께 호출하고, 컴포넌트가 반환하는 JSX에 대해 재귀적으로 함수를 호출합니다. 함수 타입의 컴포넌트를 호출하는 부분을 보면 앞에 await 키워드가 있습니다. 서버 컴포넌트는 서버에서 실행되기 때문에 함수 컴포넌트의 비동기 작업이 완료될 때까지 기다릴 수 있고, 이를 위해 await를 사용했습니다. 서버에서 await와 함께 호출된 컴포넌트는 리액트 엘리먼트를 반환하는데, 이를 renderToString이나 renderToPipeableStream에 전달하면 문자열이나 문자열 스트림으로 렌더링할 수 있습니다. 그 결과, 서버에서 모든 비동기 작업이 처리되어 데이터 의존성이 모두 해결된 엘리먼트 트리(즉, 자바스크립트 객체)를 생성할 수 있게 됩니다.

마지막은 객체지만 리액트 엘리먼트가 아닌 경우입니다. 평험한 자바스크립트 객체이기 때문에 해당 객체의 각 값에 대해 함수를 재귀적으로 호출하고 결과를 반환합니다.

이를 사용해 서버 컴포넌트를 리액트 엘리먼트로 렌더링한 후에 클라이언트로 전송할 수 있습니다. 이제 해당 엘리먼트 트리를 renderToString이나 renderToPipeableStream으로 전달하거나 직렬화해서 브라우저로 직접 전송할 수 있습니다. 리액트는 이를 자신이 이해할 수 있는 리액트 엘리먼트 트리로 해석하고 클라이언트에서 렌더링합니다. 하지만 해야 할 일이 남았습니다. 바로 직렬화입니다.

직렬화

직렬화는 초기 로드 중에 애플리케이션이 올바르로 효율적으로 렌더링되도록 보장하는 데 매우 중요한 작업입니다. 서버에서 렌더링된 동일한 출력이 클라이언트와 일치해야만 리액트가 올바르게 재조정하고 차이점을 파악할 수 있기 때문입니다. 애플리케이션이 서버에서 렌더링될 때, 생성된 리액트 엘리먼트는 브라웆어로 전송될 수 있는 HTML 문자열로 변환되어야 합니다. 이떄 리액트 엘리먼트를 문자열로 변환하는 과정을 직렬화라고 합니다.

일반적인 리액트 에플리케이션에서 리액트 엘리먼트는 메모리에 있는 객체입니다. 이러한 엘리먼트는 React.createElement를 호출하거나 JSX 문법을 사용해 생성됩니다. 리액트 엘리먼트는 컴포넌트가 어떻게 렌더링될지 표현하지만, 아직 실제 DOM 엘리먼트는 아닙니다.

const element = <h1>Hello, world</h1>;

ReactDOMServer.renderToString 같은 함수를 사용해 서버에서 렌더링할 때 이러한 리액트 엘리먼트는 HTML 문자열로 직렬화됩니다. 직렬화 프로세스는 리액트 엘리먼트 트리를 탐색해 각 엘리먼트에 해당하는 HTML을 생성하고 이를 모두 합쳐 하나의 HTML 문자열로 만듭니다.

const htmlString = ReactDOMServer.renderToString(element);
// htmlString은 '<h1>Hello, world</h1>'가 됩니다.

그런 다음 이 HTML 문자열을 클라이언트로 전송해 페이지의 초기 마크업으로 사용합니다. 자바스크립트 번들이 클라이언트에 로드되면 리액트는 이벤트 핸들러를 추가하고 동적 콘텐츠를 채우면서 DOM을 '하이드레이트'합니다.

직렬화 단계는 여러 가지 이유로 중요합니다. 첫째, 서버가 즉시 표시할 수 있는 완전한 HTML 페이지를 빠르게 클라이언트에 전송할 수 있습니다. 이렇게 하면 사용자가 콘텐츠와 더 빨리 상호 작용하게 되어 페이지의 체감 로딩 속도가 개선됩니다.
또한 리액트 엘리먼트를 HTML 문자열로 직렬화하면 환경에 관계없이 일관되고 예측 가능한 초기 렌더링이 가능합니다. 생성된 HTML은 정적이며 서버에서 렌더링되든 클라이언트에서 렌더링되든 동일하게 표시됩니다.
끝으로 직렬화는 클라이언트 측의 하이드레이션 프로세스를 용이하게 합니다. 자바스크립트 번들이 클라이언트에서 로드되면 리액트는 이벤트 핸들러를 추가하고 동적 콘텐츠를 모두 채워야 합니다. 직렬화된 HTML 문자열을 초기 마크업으로 사용하면 리액트가 작업할 수 있는 견고한 기반을 확보해 다시 실행하는 하이드레이션 프로세스를 보다 효율적이고 안정적으로 수행할 수 있습니다.

업데이트

RSC는 장점이 많지만, 서버 컴포넌트와 클라이언트 컴포넌트라는 두 종류의 컴포넌트를 고려해야 한다는 점에서 생각할 게 많아진다는 단점도 있습니다. 컴포넌트 중에는 서버 컴포넌트가 될 수 없는 것도 있기 때문입니다.

사용자가 + 버튼을 클릭하면 카운터 값을 1씩 증가시키는 간단한 카운터 컴포넌트를 생각해봅시다.

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h1>안녕 친구들, 내 멋진 카운터를 봐줘!</h1>
      <p>내 소개: 나는 리액트를 좋아해. 방명록에 글을 남겨줘!</p>
      <p>카운트: {count}</p>
      <button onClick={() => setCount(count + 1)}>+</button>
    </div>
  );
}

이 컴포넌트는 두 가지 이유 떄문에 서버 컴포넌트가 될 수 없습니다.

클라이언트 전용 API인 useState를 사용합니다. 즉, 서버는 count의 초깃값이 무엇인지 알지 못하므로 초기 HTML을 렌더링할 수 없습니다. 이는 서버가 초기 HTML을 렌더링한 후, 그리고 사용자가 상호 작용할 수 있는 UI 클라이언트가 렌더링하기 전에 문제가 될 것입니다.
클라이언트 전용 API인 onClick을 사용합니다. 서브는 인터랙티브하지 않기 때문에 서버에서 실행 중인 프로페스는 클릭할 수 없습니다. 따라서 서버 컴포넌트에서 onClick을 사용하기란 불가능합니다. 또 서버 컴포넌트의 모든 프롭은 직렬화가 가능해야 합니다. 서버가 프롭을 직렬화해 클라이언트로 전송할 수 있어야 하기 때문입니다. 하지만 함수는 직렬화가 불가능하므로 서버 컴포넌트에서는 함수를 프롭으로 사용할 수 없습니다.

따라서 서버 컴포넌트의 기능을 활용하고 싶다면, 바록 간단한 카운터라고 하더라도 서버 부분과 클라이언트 부분을 분리해야 합니다.

// 서버 컴포넌트
function ServerCounter() {
  return (
    <div>
      <h1>안녕 친구들, 내 멋진 카운터를 봐줘!</h1>
      <p>내 소개: 나는 리액트를 좋아해. 방명록에 글을 남겨줘!</p>
      <ClientPart />
    </div>
  );
}

// 클라이언트 컴포넌트
"use client";
function ClientPart() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>카운트: {count}</p>
      <button onClick={() => setCount(count + 1)}>+</button>
    </div>
  );
}

컴포넌트에서 서버 렌더링이 가능한 부분과 클라이언트 렌더링이 가능한 부분을 고려해야 합니다. 이로 인해 약간의 고충이 생깁니다. 그럼에도 이 작업은 의미 있습니다. 인터랙티브한 부분을 담당하는 카운터 애플리케이션의 일부를 분리해 냈고, 이 작은 부분만이 자바스크립트 번들의 일부로 사용자에게 전달되기 때문입니다. 나머지 코드는 클라이언트 자바스크립트 번들에 포함되지 않습니다. 그 결과 네트워크를 통해 전달되는 자바스크립트 번들의 크기가 현저하게 줄어 로딩 시간이 빨라지고 성능도 향상됩니다. CPU 측면에서는 자바스크립트를 파싱하고 실행하는 작업을 감소하고, 네트워크 측면에서는 다운로드해야 하는 데이터 양이 적어집니다. 이것이 바로 가능한 한 많은 코드를 서버에서만 렌더링하고 클라이언트 번들에서 제거하려는 이유입니다.

내부 동작

클라이언트 컴포넌트는 해당 컴포넌트가 포함된 파일 최상단에 "use client" 지시자를 추가해 클라이언트 컴포넌트로 설정됩니다.

개념적으로는 서버에서 실행되는 서버 그래프와, 클라이언트에서 필요할 때 다운로드되어 실행되는 하나 이상의 클라이언트 번들이 존재합니다. 그렇다면 리액트는 언제 어느 클라이언트를 가져와 실행해야 되는지를 어떻게 파악할까요? 앞서 보았던 카운터를 예로 들겠습니다.

카운터 애플리케이션의 컴포넌트 트리의 서버 컴포넌트는 서버에서 렌더링되고, 클라이언트 컴포넌트는 클라이언트에서 렌더링됩니다. 트리의 루트가 서버 컴포넌트이기 때문에 전체 트리는 서버에서 렌더링됩니다. 하지만 InteractiveClientPart 컴포넌트는 클라이언트이므로 서버에서 렌더링되지 않습니다. 대신, 서버는 클라이언트 컴포넌트를 위한 플레이스홀더를 렌더링합니다. 이 플레이스홀더는 클라이언트 번들러가 생성한 특정 모듈에 대한 참조입니다. 간단히 말해 '트리의 이 지점에 도달하면 특정 모듈을 사용해야 한다'고 알려 주는 것입니다.

여기서 중요한 것은 서버가 올바른 클라이언트 모듈에 대한 참조를 전송하고, 클라이언트의 리액트가 해당 참조를 기반으로 빈 부분을 채운다는 점입니다. 이 과정에서 리액트는 모듈 참조를 클라이언트 번들에 있는 실제 모듈로 교체합니다. 리액트는 이런 방식을 통해 언제 클라이언트 컴포넌트를 가져와 실행해야 하는지 파악합니다.

주의할 점

서버 컴포넌트는 서버에서만 실행되고 클라이언트 컴포넌트는 클라이언트에서만 실행된다는 오해가 있지만 사실이 아닙니다. 서버 컴포넌트는 실제 서버에서만 실행되고 르액트 엘리먼트를 의미하는 객체를 출력하지만, 클라이언트 컴포넌트는 클라이언트에서만 실행되지 않습니다.

'컴포넌트가 실해된다'는 것은 컴포넌트를 표현하는 함수가 호출된다는 뜻입니다.

function MyComponent() {
  return <div>hello world</div>;
}

'My Component가 실행된다'는 말은 MyComponent 함수가 프롭과 함께 호출되어 다음과 같은 평험한 자바스크립트 객체로 표현되는 리액트 엘리먼틀 반환한다는 뜻입니다.

{
  &&typeof: Symbol(react.element),
  type: "div",
  props: {
    children: "hello world",
  }
}

이것이 바로 '컴포넌트가 실행된다'는 말의 의미입니다.

서버 렌더링 중에 클라이언트 컴포넌트는 서버에서 실행되고 리액트 엘리먼트를 나타내는 객체를 출력합니다. 그런 다음 이러한 엘리먼트는 HTML 문자열로 직렬화되어 브라우저에서 HTML 마크업을 렌더링하는 클라이언트로 전송됩니다. 따라서 클라이언트 컴포넌트도 서버에서 실행되고 리액트 엘리먼트를 나타내는 일부 객체를 반환한 후에 서버에서 이를 HTML로 직렬화해 클라이언트로 전송합니다.

이를 보다 정확하게 표현하기 위해 다음과 같이 참인 명제를 구성했습니다.

서버 컴포넌트는 서버에서 실행되며 리액트 엘리먼트를 나타내는 객체를 출력한다.
클라이언트 컴포넌트는 서버에서 실행되며 리액트 엘리먼트를 나타내는 객체를 출력한다.
서버에는 클라이언트와 서버 컴포넌트의 모든 리액트 엘리먼트를 표현하는 커다란 객체가 있다.
이 객체는 문자열로 변환되어 클라이언트로 전송된다.
이 시점부터 서버 컴포넌트는 클라이언트에서 실행되지 않는다.
이 시점부터 클라이언트 컴포넌트는 클라이언트에서만 실행된다.

서버 컴포넌트 규칙

직렬화 가능성이 가장 중요하다

서버 컴포넌트에서는 모든 프롭을 직렬화할 수 있어야 합니다. 이는 앞서 설명한 것처럼 서버가 프롭을 직렬화해 클라이언트로 전송할 수 있어야 하기 때문입니다. 따라서 서버 컴포넌트에서 함수 등 직렬화할 수 없는 값을 프롭으로 사용하지 못합니다.

부작용이 있는 훅 금지

서버 환경은 클라이언트와 완전히 다릅니다. 인터랙티브하지도 않고, DOM이나 window 객체도 없습니다. 따라서 부작용이 있는 훅은 서버 컴포넌트에서 사용할 수 없습니다.
서버 컴포넌트라고 하더라도 상태, 효과, 브라우저 전용 API에 의존하지 않는 훅은 사용할 수 있습니다. 예를 들면 useRef 훅이 그렇습니다. 이러한 제약이 반드시 나쁜 것은 아닙니다. 오히려 이를 통해 컴포넌트 작업을 보다 안전한 방향으로 유도하기 떄문입니다.

상태는 동일하지 않다

서버 컴포넌트의 상태는 클라이언트 컴포넌트 상태와 동일하지 않습니다. 서버 컴포넌트는 서버에서 렌더링되고 클라이언트 컴포넌트는 클라이언트에서 렌더링되기 떄문입니다. 서버와 클라이언트의 관계는 1:N의 관계로 하나의 서버가 다수의 클라이언트에 대응하고 있습니다. 이러한 특성상 서버의 상태가 여러 클라이언트에 공유될 수 있고, 이로 인해 클라이언트의 상태가 다른 클라이언트에 노출될 위험이 높습니다.

클라이언트 컴포넌트는 서버 컴포넌트로 가져올 수 없다

클라이언트 컴포넌트에서는 서버 컴포넌트를 가져올 수 없슺니다. 서버 컴포넌트는 서버에서만 실행되지만 클라이언트 컴포넌트는 브라우저를 포함해 양쪽 모두에서 실행되기 때문입니다.

"use client";
import { ServerComponent } from "./ServerComponent";

function ClientComponent() {
  return (
    <div>
      <h1>제 멋진 서버 컴포넌트 좀 봐주세요!</h1>
      <ServerComponent />
    </div>
  );
}

이는 불가능한 작업입니다. 서버 컴포넌트는 오직 서버에서만 실행되며, 여기서 불러오려는 서버 컴포넌트는 Node.js API와 같이 클라이언트 환경에서는 사용할 수 없는 요소를 포함할 수 있습니다. 따라서 이를 클라이언트에서 실행하려고 하면 오류가 발생합니다.

그러나 클라이언트 컴포넌트는 프롭을 통해 서버 컴포넌트를 조합할 수 있습니다.

import { ServerComponent } from "./ServerComponent";

async function TheParentOfBothComponents() {
  return (
    <ClientComponent>
      <ServerComponent />
    </ClientComponent>
  );
}

이렇게 작성하면 문제없이 동작합니다. 왜냐하면 클라이언트 컴포넌트에서 명시적으로 import를 사용해 서버 컴포넌트를 가져온 것이 아니기 때문입니다. 대신 부모 서버 컴포넌트가 서버 컴포넌트를 클라이언트 컴포넌트의 프롭으로 전달합니다. import 사용이 금지된 유일한 이유는 클라이언트 번들에 서버 컴포넌트가 포함되는 것을 방지하는 것입니다. 번들러는 import 문만 감서하지 프롭으로 전달되는 컴포먼트 구성에는 주의를 기울이지 않습니다.

클라이언트 컴포넌트는 나쁘지 않다

서버 컴포넌트가 도입되기 전, 리액트 컴포넌트에는 클라이언트 컴포넌트라는 한 종류만 존재했습니다. 다시 말해 기존의 모든 컴포넌트가 클라이언트 컴포넌트라는 의미이며, 그래도 아무런 문제가 없었습니다. 클라이언트 컴포넌트는 나쁘지 않으며 사라지지 않을 것입니다. 여전히 리액트 애플리케이션의 핵심이며, 앞으로도 가장 널리 작성되는 종류의 컴포넌트일 것입니다.

서버 액션

RSC는 "use server" 지시자를 사용해 클라이언트 코드에서 호출할 수 있는 서버 함수를 호출하는데, 이러한 함수를 가리켜 서버 액션이라고 합니다.

비동기 함수의 본문 첫 줄에 "use server"를 추가하면, 리액트와 번들러는 이 함수를 클라이언트에서 호출할 수 있지만 서버에서만 실행되는 함수로 취급합니다. 클라이언트에서 서버 액션을 호출할 떄, 함수에 전달되는 모든 인수는 직렬화되어 네트워크를 통해 서버에 전달됩니다. 서버 액션이 값을 반환하면, 반환된 값은 직렬화되어 클라이언트에서 반환됩니다.

함수마다 일일이 "use server"로 추가하는 대신, 파일 상단에 "use server" 지시자를 추가해 파일 내에서 내보내진 함수를 서버 액션으로 표시하는 방법도 있습니다. 이렇게 하면 클라이언트 코드에서도 import 를 사용해 이 함수를 가져오고 사용할 수 있습니다.

폼과 데이터 조작

// App.js
async function requestUsername(formData) {
  'use server';
  const username = formData.get('username');

  // ...
}

export default function App() {
  return (
    <form action={requestUsername}>
      <input type="text" name="username" />
      <button type="submit">요청</button>
    </form>
  )
}

이 예에서 requestUsername은 <form>으로 전달되는 서버 액션입니다. 사용자가 이 양식을 제출하면 서버의 requestUsername 함수에 네트워크 요청이 전달됩니다. 폼에서 서버 액션을 호출하면, 리액트는 폼의 FormData를 서버 액션의 첫 번째 인수로 제공합니다.

서버 액션은 폼 액션에 전달함으로써 리액트는 폼을 점진적으로 향상합니다. 다시 말해 자바스크립트 번들이 전부 로드 되기전에도 폼을 사용하고 전송할 수 있습니다.

폼 외부

서버 액션은 서버 엔드포인트로 노출되며 클라이언트 코드 어디에서든 호출할 수 있습니다.

폼이 아닌 곳에서 서버 액션을 사용하는 경우, 트랜지션 내부에서도 서버 액션을 호출할 수 있습니다. 이를 통해 로딩 메시지를 표시하고, 낙관적인 상태 업데이트를 보여주며, 예상치 못한 오류를 처리할 수 있습니다.

"use client";

import { useState, useTransition } from "react";

function LikeButton() {
  const [isPending, startTransition] = useTransition();
  const [likeCount, setLikeCount] = useState(0);

  const incrementLike = async () => {
    "use server";
    return likeCount + 1;
  };

  const onClick = () => {
    startTransition(async () => {
      // 서버 액션에서 프라미스가 반환되므로 await를 사용해 반환되는 값을 읽습니다.
      const currentCount = await incrementLike();
      setLikeCount(currentCount);
    });
  };

  return (
    <>
      <p>좋아요 수: {likeCount}</p>
      <button onClick={onClick} disabled={isPending}>
        좋아요
      </button>
    </>
  );
}

서버 액션은 클라이언트 코드에서 서버 함수를 호출할 수 있게 하는 리액트의 강력한 새 기능입니다. 하지만 이러한 지시자를 기본 리액트에서 사용하기는 다소 번거롭고 많은 설정 작업이 필요하므로 라이브러리나 프레임워크를 통해 사용하기를 권장합니다.

장점​

서버 렌더링​

내부 구조​

직렬화​

업데이트​

내부 동작​

주의할 점​

서버 컴포넌트 규칙​

직렬화 가능성이 가장 중요하다​

부작용이 있는 훅 금지​

상태는 동일하지 않다​

클라이언트 컴포넌트는 서버 컴포넌트로 가져올 수 없다​

클라이언트 컴포넌트는 나쁘지 않다​

서버 액션​

폼과 데이터 조작​

폼 외부​

장점