Request Waterfall / Static Rendering / Parallel Data Fetching

 

1. Request Waterfall

Request Waterfall는 데이터 요청이 순차적으로 처리되며 발생하는 지연을 의미합니다.

• 문제점:
  • 하나의 요청이 완료된 후에야 다음 요청이 시작되기 때문에 요청 처리 시간이 누적됩니다.
  • 특히, 여러 데이터를 의존적으로 가져와야 하는 경우 페이지 로드 속도에 큰 영향을 줍니다.

예시:

async function fetchData() {
  const user = await fetchUser();
  const posts = await fetchPosts(user.id);
  return { user, posts };
}

위 코드에서는 fetchUser가 끝난 뒤에야 fetchPosts가 실행되므로 비효율적입니다.

2. Static Rendering

Static Rendering은 빌드 시 데이터를 미리 가져와 정적인 HTML 파일로 생성하는 방식입니다.

• 사용 목적:
  • 데이터가 자주 변경되지 않는 경우(예: 블로그, 마케팅 페이지 등) 사용.
  • 성능 최적화: 데이터 요청이 서버에서 처리되지 않고, 정적 파일로 클라이언트에 제공되므로 빠른 로딩 속도를 제공.
  • SEO에 유리.

Next.js의 두 가지 Static Rendering 방식:

1. Static Site Generation (SSG):
   • 빌드 시 HTML 생성.
   • 예시:

export async function getStaticProps() { 
	const data = await fetch('<https://api.example.com/posts>'); 
    return { props: { posts: data } }; 
}

    2. Incremental Static Regeneration (ISR):

• 일정 시간 간격으로 정적 페이지를 다시 생성.
• 변경 사항이 많지 않은 데이터에 적합.

3. Parallel Data Fetching

Parallel Data Fetching은 독립적인 데이터 요청을 병렬로 처리하여 로딩 시간을 최적화하는 방법입니다. Promise.all() 또는 Promise.allSettled()를 사용해 동시에 모든 promise를 실행할 수 있습니다.

• 장점:
  • 독립적인 요청을 동시에 처리하므로 대기 시간이 단축됩니다.
  • 성능 최적화에 유리.

Next.js에서 병렬 데이터 페칭 구현 예시:

export default async function Page() {
  const [users, posts] = await Promise.all([
    fetch('https://api.example.com/users').then((res) => res.json()),
    fetch('https://api.example.com/posts').then((res) => res.json()),
  ]);

  return (
    <div>
      <h1>Users</h1>
      <ul>{users.map((user) => <li key={user.id}>{user.name}</li>)}</ul>
      <h1>Posts</h1>
      <ul>{posts.map((post) => <li key={post.id}>{post.title}</li>)}</ul>
    </div>
  );
}

 

 

Request Waterfall vs. Parallel Data Fetching

 

특징	Request Waterfall	Parallel Data Fetching
요청 처리 방식	순차적으로 요청 처리	독립적인 요청을 병렬로 처리
효율성	느림 (각 요청 완료 후 다음 요청 시작)	빠름 (모든 요청을 동시에 시작)
적용 사례	요청 간 의존성이 있는 경우	요청 간 의존성이 없는 경우
Next.js 적용 방법	await를 순차적으로 사용	Promise.all로 병렬 처리

정리

• Request Waterfall는 순차적인 데이터 요청으로 인해 지연이 발생하며, 피해야 하는 패턴입니다.
• Static Rendering은 데이터가 자주 변하지 않는 경우 최적의 성능을 제공하며, SEO에도 유리합니다.
• Parallel Data Fetching은 요청 간 의존성이 없을 때 사용하며, 페이지 로드 시간을 크게 단축할 수 있습니다.

 

번역본 보러 가기