React Fetch-on-render, Fetch-then-render, Render-as-you-fetch,

1. Fetch-on-render

1-1. 개념

• 데이터를 컴포넌트가 렌더링된 이후에 가져온다.
• 일반적으로 useEffect를 사용하여 데이터 fetching을 실행하고, 상태를 업데이트하여 화면에 데이터를 렌더링한다.

1-2. 장점

• 구현이 간단하고, React의 기존 생명 주기를 따른다.
• 초기에 최소한의 코드로 시작하기에 적합하다.

1-3. 단점

• 컴포넌트가 ㅁ너저 렌더링되고 데이터를 가져오는 동안 빈 상태나 로딩 화면이 보인다.
• 사용자 경험(UX)이 떨어질 수 있다. 

function Component() {
  const [data, setData] = React.useState(null);

  React.useEffect(() => {
    fetch('/api/data')
      .then((response) => response.json())
      .then((data) => setData(data));
  }, []);

  if (!data) return <p>Loading...</p>;

  return <div>{data.title}</div>;
}

 

 

2. Fetch-then-render

2-1. 개념

• 데이터를 먼저 가져온 다음, 데이터를 기반으로 컴포넌트를 렌더링한다.
• 컴포넌트가 렌더링 되기 전에 데이터 fetching이 완료되도록 보장한다.

2-2. 장점

• 사용자가 데이터를 보기 전에 로딩 상태를 처리할 수 있어 더 나은 UX를 제공한다.
• 서버 측 렌더링(SSR)과 잘 맞는다.

2-3. 단점

• 데이터 fetching이 완료될 때까지 렌더링이 지연된다.
• 로딩 상태가 길어지면 사용자 경험에 부정적인 영향을 줄 수 있다.

async function fetchData() {
  const response = await fetch('/api/data');
  return response.json();
}

function Component({ data }) {
  return <div>{data.title}</div>;
}

// 데이터 fetching 후 컴포넌트에 전달
fetchData().then((data) => {
  ReactDOM.render(<Component data={data} />, document.getElementById('root'));
});

 

 

3. Render-as-you-fetch

3-1. 개념

• 데이터를 가져오는 동시에 컴포넌트를 렌더링한다.
• Suspense와 함께 사용하여 로딩 상태를 효율적으로 처리한다.

3-2. 장점

• 사용자에게 가능한 빠르게 콘텐츠를 제공한다.
• 코드 분할 및 비동기 렌더링과 결합하면 매우 효율적이다.

3-3. 단점

• 구현이 상대적으로 복잡하다.
• Suspense 및 React.lazy에 대한 이해가 필요하다.

3-4. Suspense를 이용한 구현

const dataPromise = fetch('/api/data').then((res) => res.json());

function fetchData() {
  const data = dataPromise.read(); // Suspense가 데이터를 읽을 수 있도록 처리
  return data;
}

function Component() {
  const data = fetchData();
  return <div>{data.title}</div>;
}

function App() {
  return (
    <React.Suspense fallback={<p>Loading...</p>}>
      <Component />
    </React.Suspense>
  );
}

 

4. Suspense란?

React의 Suspense는 비동기적으로 데이터를 가져오거나 컴포넌트를 로드하는 동안 UI의 특정 부분을 대체 콘텐츠로 표시하는 기능이다.

 

4-1. 주요 특징

• 데이터를 로딩 중일 때 대체 UI(fallback)를 제공
• Raect.lazy와 함께 코드 분할을 쉽게 처리
• 서버 컴포넌트와 클라이언트 컴포넌트의 데이터 fetching 통합

4-2. 장점

• 비동기 로직이 컴포넌트 트리에 자연스럽게 통합된다.
• 복잡한 로딩 상태를 관리를 줄이고, 선언적으로 코드를 작성할 수 있다.

const LazyComponent = React.lazy(() => import('./LazyComponent'));

function App() {
  return (
    <React.Suspense fallback={<div>Loading...</div>}>
      <LazyComponent />
    </React.Suspense>
  );
}

 

 

5. 정리

• Fetch-on-render: 간단하지만 초기 렌더링시 로딩 상태가 보임
• Fetch-then-render: 데이터를 미리 가져오지만 초기 렌더링이 느릴 수 있음
• Render-as-you-fetch: 데이터를 가져오면서 동시에 렌더링하여 사용자 경험을 최적화
• Suspense: 비동기 렌더링 및 데이터 fetching을 선언적으로 관리하는 도구