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>
  );
}

• Promise.all을 사용하여 데이터를 병렬로 가져옵니다.