1. 비동기 컴포넌트(서버 컴포넌트)

현재 비동기 컴포넌트는 서버 컴포넌트에서만 지원된다. 컴포넌트가 async로 표시되면 비동기 작업(예: 데이터 페칭)을 수행할 수 있다.

이전의 서버 컴포넌트 예제에서 이러한 동작을 볼 수 있었다. 컴포넌트가 데이터베이스에서 데이터를 가져와 렌더링 된 JSX를 HTML로 클라이언트에 전송했기 때문이다.

현재로서는 자바스크립트 Promise를 클라이언트 컴포넌트에 전달할 수 있다.

import { Suspense } from 'react';

const ReactServerComponent = () => {
  const postsPromise = db.query('SELECT * FROM posts');

  return (
    <div>
      <Suspense>
        <ReactClientComponent promisedPosts={postsPromise} />
      </Suspense>
    </div>);
};

2. 비동기 컴포넌트(클라이언트 컴포넌트)

하지만 클라이언트 컴포넌트에서는 이 방식이 작동하지 않는데, 이는 클라이언트 측에서 렌더링이 차단될 수 있기 때문이다.

또 리액트의 use API를 사용해 클라이언트 컴포넌트에서 이를 해결할 수 있다.

'use client';

import { use } from 'react';

const ReactClientComponent = ({ promisedPosts }) => {
  const posts = use(promisedPosts);

  return (
    <ul>
      {posts?.map(post => (
        <li key={post.id}>{post.title}</li>))}
    </ul>);
};

export { ReactClientComponent };

미래에는 리액트가 클라이언트 컴포넌트에서도 async 컴포넌트를 지원하여 렌더링 전에 클라이언트 컴포넌트에서 데이터를 가져올 수 있을 가능성이 크다.