Next.js 요청 워터폴: 순차적 데이터 로딩의 이해와 최적화

웹 개발의 세계에서 성능은 가장 중요합니다. 로딩이 느린 웹사이트는 사용자를 좌절시키고 검색 엔진 순위에 부정적인 영향을 미칠 수 있습니다. 인기 있는 React 프레임워크인 Next.js는 성능이 뛰어난 웹 애플리케이션을 구축하기 위한 강력한 기능을 제공합니다. 하지만 개발자는 순차적 데이터 로딩 중에 발생할 수 있는 "요청 워터폴"과 같은 잠재적인 성능 병목 현상을 인지해야 합니다.

Next.js 요청 워터폴이란 무엇인가?

의존성 체인이라고도 알려진 요청 워터폴은 Next.js 애플리케이션에서 데이터 페칭(data fetching) 작업이 순차적으로, 즉 하나가 끝난 후에 다른 하나가 실행될 때 발생합니다. 이는 컴포넌트가 한 API 엔드포인트에서 데이터를 가져온 후에야 다른 엔드포인트에서 데이터를 가져올 수 있을 때 발생합니다. 예를 들어, 한 페이지에서 사용자 프로필 정보와 최근 블로그 게시물을 표시해야 하는 시나리오를 상상해 보세요. 먼저 프로필 정보를 가져온 후, 해당 데이터가 사용 가능해져야만 애플리케이션이 사용자의 블로그 게시물을 가져오는 작업을 진행할 수 있습니다.

이러한 순차적 의존성은 "워터폴" 효과를 만들어냅니다. 브라우저는 각 요청이 완료될 때까지 기다렸다가 다음 요청을 시작해야 하므로 로드 시간이 길어지고 사용자 경험이 저하됩니다.

예시 시나리오: 전자상거래 상품 페이지

전자상거래 상품 페이지를 생각해 봅시다. 이 페이지는 먼저 기본적인 상품 정보(이름, 설명, 가격)를 가져와야 할 수 있습니다. 이 정보가 확보되면 관련 상품, 고객 리뷰, 재고 정보를 가져올 수 있습니다. 만약 이러한 각 데이터 페치가 이전 데이터 페치에 의존한다면, 상당한 요청 워터폴이 발생하여 초기 페이지 로드 시간을 크게 증가시킬 수 있습니다.

요청 워터폴이 왜 중요한가?

요청 워터폴의 영향은 상당합니다:

• 로드 시간 증가: 가장 명백한 결과는 페이지 로드 시간이 느려지는 것입니다. 사용자는 페이지가 완전히 렌더링될 때까지 더 오래 기다려야 합니다.
• 저하된 사용자 경험: 긴 로드 시간은 사용자에게 불만을 안겨주고 웹사이트를 이탈하게 만들 수 있습니다.
• 검색 엔진 순위 하락: 구글과 같은 검색 엔진은 페이지 로드 속도를 순위 결정 요인으로 고려합니다. 느린 웹사이트는 SEO에 부정적인 영향을 미칠 수 있습니다.
• 서버 부하 증가: 사용자가 기다리는 동안에도 서버는 계속해서 요청을 처리하고 있으며, 이는 서버 부하와 비용을 증가시킬 수 있습니다.

Next.js 애플리케이션에서 요청 워터폴 식별하기

Next.js 애플리케이션의 요청 워터폴을 식별하고 분석하는 데 도움이 되는 몇 가지 도구와 기술이 있습니다:

• 브라우저 개발자 도구: 브라우저 개발자 도구의 네트워크 탭은 애플리케이션이 생성하는 모든 네트워크 요청을 시각적으로 보여줍니다. 요청이 이루어지는 순서, 완료에 걸리는 시간, 요청 간의 의존성을 확인할 수 있습니다. 이전 요청이 완료된 후에야 다음 요청이 시작되는 긴 요청 체인을 찾아보세요.
• Webpage Test (WebPageTest.org): WebPageTest는 요청 순서와 시간을 시각적으로 나타내는 워터폴 차트를 포함하여 웹사이트에 대한 상세한 성능 분석을 제공하는 강력한 온라인 도구입니다.
• Next.js 개발자 도구: Next.js 개발자 도구 확장 프로그램(Chrome 및 Firefox에서 사용 가능)은 컴포넌트의 렌더링 성능에 대한 통찰력을 제공하며 느린 데이터 페칭 작업을 식별하는 데 도움이 될 수 있습니다.
• 프로파일링 도구: Chrome 프로파일러와 같은 도구는 JavaScript 코드의 성능에 대한 상세한 통찰력을 제공하여 데이터 페칭 로직의 병목 현상을 식별하는 데 도움을 줍니다.

데이터 로딩 최적화 및 요청 워터폴 감소 전략

다행히도, Next.js 애플리케이션에서 데이터 로딩을 최적화하고 요청 워터폴의 영향을 최소화하기 위해 사용할 수 있는 몇 가지 전략이 있습니다:

1. 병렬 데이터 페칭

요청 워터폴에 대처하는 가장 효과적인 방법은 가능할 때마다 데이터를 병렬로 가져오는 것입니다. 하나의 데이터 페치가 완료되기를 기다리지 않고 다음 페치를 시작하는 대신, 여러 데이터 페치를 동시에 시작하세요. 이는 전체 로드 시간을 크게 줄일 수 있습니다.

`Promise.all()` 사용 예시:

            
async function ProductPage() {
  const [product, relatedProducts] = await Promise.all([
    fetch('/api/product/123').then(res => res.json()),
    fetch('/api/related-products/123').then(res => res.json()),
  ]);

  return (
    <div>
      <h1>{product.name}</h1>
      <p>{product.description}</p>
      <h2>Related Products</h2>
      <ul>
        {relatedProducts.map(relatedProduct => (
          <li key={relatedProduct.id}>{relatedProduct.name}</li>
        ))}
      </ul>
    </div>
  );
}

            

              
                Copy
              
            
          

이 예제에서 `Promise.all()`은 제품 상세 정보와 관련 상품을 동시에 가져올 수 있게 해줍니다. 컴포넌트는 두 요청이 모두 완료된 후에만 렌더링됩니다.

장점:

• 로드 시간 감소: 병렬 데이터 페칭은 페이지를 로드하는 데 걸리는 전체 시간을 극적으로 줄여줍니다.
• 사용자 경험 개선: 사용자가 콘텐츠를 더 빨리 보게 되어 더 매력적인 경험을 제공합니다.

고려사항:

• 에러 처리: 병렬 요청 중 발생할 수 있는 잠재적 실패를 관리하기 위해 `try...catch` 블록과 적절한 에러 처리를 사용하세요. 개별 성공 여부와 관계없이 모든 프라미스가 이행되거나 거부되도록 하려면 `Promise.allSettled`를 고려하세요.
• API 호출 제한(Rate Limiting): API 호출 제한에 유의하세요. 너무 많은 요청을 동시에 보내면 애플리케이션이 스로틀링되거나 차단될 수 있습니다. 요청 큐잉이나 지수 백오프와 같은 전략을 구현하여 호출 제한을 원활하게 처리하세요.
• 오버-페칭(Over-Fetching): 실제로 필요한 것보다 더 많은 데이터를 가져오지 않도록 하세요. 불필요한 데이터를 가져오는 것은 병렬로 수행되더라도 성능에 영향을 미칠 수 있습니다.

2. 데이터 의존성 및 조건부 페칭

때로는 데이터 의존성을 피할 수 없습니다. 다른 데이터를 가져오기 전에 먼저 초기 데이터를 가져와야 할 수도 있습니다. 이런 경우에는 이러한 의존성의 영향을 최소화하도록 노력해야 합니다.

`useEffect`와 `useState`를 사용한 조건부 페칭:

            
import { useState, useEffect } from 'react';

function UserProfile() {
  const [userId, setUserId] = useState(null);
  const [profile, setProfile] = useState(null);
  const [blogPosts, setBlogPosts] = useState(null);

  useEffect(() => {
    // Simulate fetching the user ID (e.g., from local storage or a cookie)
    setTimeout(() => {
      setUserId(123);
    }, 500); // Simulate a small delay
  }, []);

  useEffect(() => {
    if (userId) {
      // Fetch the user profile based on the userId
      fetch(`/api/user/${userId}`) // Make sure your API supports this.
        .then(res => res.json())
        .then(data => setProfile(data));
    }
  }, [userId]);

  useEffect(() => {
    if (profile) {
      // Fetch the user's blog posts based on the profile data
      fetch(`/api/blog-posts?userId=${profile.id}`) //Make sure your API supports this.
        .then(res => res.json())
        .then(data => setBlogPosts(data));
    }
  }, [profile]);

  if (!profile) {
    return <p>Loading profile...</p>;
  }

  if (!blogPosts) {
    return <p>Loading blog posts...</p>;
  }

  return (
    <div>
      <h1>{profile.name}</h1>
      <p>{profile.bio}</p>
      <h2>Blog Posts</h2>
      <ul>
        {blogPosts.map(post => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
}

            

              
                Copy
              
            
          

이 예제에서는 `useEffect` 훅을 사용하여 조건부로 데이터를 가져옵니다. `profile` 데이터는 `userId`가 사용 가능해진 후에만 가져오고, `blogPosts` 데이터는 `profile` 데이터가 사용 가능해진 후에만 가져옵니다.

장점:

• 불필요한 요청 방지: 데이터가 실제로 필요할 때만 가져오도록 보장합니다.
• 성능 개선: 애플리케이션이 불필요한 API 호출을 하지 않도록 하여 서버 부하를 줄이고 전반적인 성능을 향상시킵니다.

고려사항:

• 로딩 상태: 사용자에게 데이터가 로딩 중임을 알리는 적절한 로딩 상태를 제공하세요.
• 복잡성: 컴포넌트 로직의 복잡성에 유의하세요. 너무 많은 중첩된 의존성은 코드를 이해하고 유지 관리하기 어렵게 만들 수 있습니다.

3. 서버 사이드 렌더링(SSR) 및 정적 사이트 생성(SSG)

Next.js는 서버 사이드 렌더링(SSR)과 정적 사이트 생성(SSG)에 뛰어납니다. 이러한 기술은 서버나 빌드 시에 콘텐츠를 미리 렌더링하여 클라이언트 사이드에서 수행해야 할 작업량을 줄임으로써 성능을 크게 향상시킬 수 있습니다.

`getServerSideProps`를 사용한 SSR:

            
export async function getServerSideProps(context) {
  const product = await fetch(`http://example.com/api/product/${context.params.id}`).then(res => res.json());
  const relatedProducts = await fetch(`http://example.com/api/related-products/${context.params.id}`).then(res => res.json());

  return {
    props: {
      product,
      relatedProducts,
    },
  };
}

function ProductPage({ product, relatedProducts }) {
  return (
    <div>
      <h1>{product.name}</h1>
      <p>{product.description}</p>
      <h2>Related Products</h2>
      <ul>
        {relatedProducts.map(relatedProduct => (
          <li key={relatedProduct.id}>{relatedProduct.name}</li>
        ))}
      </ul>
    </div>
  );
}

            

              
                Copy
              
            
          

이 예제에서 `getServerSideProps`는 페이지를 렌더링하기 전에 서버에서 제품 상세 정보와 관련 상품을 가져옵니다. 미리 렌더링된 HTML이 클라이언트로 전송되어 초기 로드 시간이 더 빨라집니다.

`getStaticProps`를 사용한 SSG:

            
export async function getStaticProps(context) {
  const product = await fetch(`http://example.com/api/product/${context.params.id}`).then(res => res.json());
  const relatedProducts = await fetch(`http://example.com/api/related-products/${context.params.id}`).then(res => res.json());

  return {
    props: {
      product,
      relatedProducts,
    },
    revalidate: 60, // Revalidate every 60 seconds
  };
}

export async function getStaticPaths() {
  // Fetch a list of product IDs from your database or API
  const products = await fetch('http://example.com/api/products').then(res => res.json());

  // Generate the paths for each product
  const paths = products.map(product => ({
    params: { id: product.id.toString() },
  }));

  return {
    paths,
    fallback: false, // or 'blocking'
  };
}

function ProductPage({ product, relatedProducts }) {
  return (
    <div>
      <h1>{product.name}</h1>
      <p>{product.description}</p>
      <h2>Related Products</h2>
      <ul>
        {relatedProducts.map(relatedProduct => (
          <li key={relatedProduct.id}>{relatedProduct.name}</li>
        ))}
      </ul>
    </div>
  );
}

            

              
                Copy
              
            
          

이 예제에서 `getStaticProps`는 빌드 시에 제품 상세 정보와 관련 상품을 가져옵니다. 그런 다음 페이지는 미리 렌더링되어 CDN에서 제공되므로 매우 빠른 로드 시간을 보장합니다. `revalidate` 옵션은 점진적 정적 재생성(ISR)을 활성화하여 전체 사이트를 다시 빌드하지 않고도 주기적으로 콘텐츠를 업데이트할 수 있게 해줍니다.

장점:

• 더 빠른 초기 로드 시간: SSR과 SSG는 클라이언트 사이드에서 수행해야 할 작업량을 줄여 초기 로드 시간을 단축시킵니다.
• SEO 개선: 검색 엔진은 미리 렌더링된 콘텐츠를 쉽게 크롤링하고 인덱싱할 수 있어 SEO가 향상됩니다.
• 더 나은 사용자 경험: 사용자가 콘텐츠를 더 빨리 보게 되어 더 매력적인 경험을 제공합니다.

고려사항:

• 데이터 최신성: 데이터가 얼마나 자주 변경되는지 고려하세요. SSR은 자주 업데이트되는 데이터에 적합하며, SSG는 정적 콘텐츠나 드물게 변경되는 콘텐츠에 이상적입니다.
• 빌드 시간: SSG는 특히 대규모 웹사이트의 경우 빌드 시간을 증가시킬 수 있습니다.
• 복잡성: SSR과 SSG를 구현하면 애플리케이션에 복잡성이 추가될 수 있습니다.

4. 코드 스플리팅

코드 스플리팅은 애플리케이션 코드를 필요에 따라 로드할 수 있는 더 작은 번들로 나누는 기술입니다. 이는 현재 페이지에 필요한 코드만 로드하여 애플리케이션의 초기 로드 시간을 줄일 수 있습니다.

Next.js에서의 동적 임포트(Dynamic Imports):

            
import dynamic from 'next/dynamic';

const MyComponent = dynamic(() => import('../components/MyComponent'));

function MyPage() {
  return (
    <div>
      <h1>My Page</h1>
      <MyComponent />
    </div>
  );
}

            

              
                Copy
              
            
          

이 예제에서는 `next/dynamic`을 사용하여 `MyComponent`를 동적으로 로드합니다. 이는 `MyComponent`의 코드가 실제로 필요할 때만 로드되어 페이지의 초기 로드 시간을 줄인다는 것을 의미합니다.

장점:

• 초기 로드 시간 감소: 코드 스플리팅은 초기에 로드해야 하는 코드의 양을 줄여 초기 로드 시간을 단축시킵니다.
• 성능 개선: 필요한 코드만 로드함으로써 코드 스플리팅은 애플리케이션의 전반적인 성능을 향상시킬 수 있습니다.

고려사항:

• 로딩 상태: 사용자에게 코드가 로딩 중임을 알리는 적절한 로딩 상태를 제공하세요.
• 복잡성: 코드 스플리팅은 애플리케이션에 복잡성을 추가할 수 있습니다.

5. 캐싱

캐싱은 웹사이트 성능을 향상시키기 위한 중요한 최적화 기술입니다. 자주 액세스하는 데이터를 캐시에 저장함으로써 서버에서 데이터를 반복적으로 가져올 필요성을 줄여 응답 시간을 단축할 수 있습니다.

브라우저 캐싱: 브라우저가 이미지, CSS 파일, JavaScript 파일과 같은 정적 자산을 캐시할 수 있도록 서버에서 적절한 캐시 헤더를 설정하도록 구성하세요.

CDN 캐싱: 콘텐츠 전송 네트워크(CDN)를 사용하여 웹사이트 자산을 사용자와 더 가까운 곳에 캐시하여 지연 시간을 줄이고 로드 시간을 개선하세요. CDN은 콘텐츠를 전 세계 여러 서버에 분산시켜 사용자가 가장 가까운 서버에서 액세스할 수 있도록 합니다.

API 캐싱: API 서버에 캐싱 메커니즘을 구현하여 자주 액세스하는 데이터를 캐시하세요. 이는 데이터베이스 부하를 크게 줄이고 API 응답 시간을 개선할 수 있습니다.

장점:

• 서버 부하 감소: 캐싱은 데이터를 데이터베이스에서 가져오는 대신 캐시에서 제공하여 서버 부하를 줄입니다.
• 더 빠른 응답 시간: 캐싱은 데이터베이스에서 데이터를 가져오는 것보다 훨씬 빠른 캐시에서 데이터를 제공하여 응답 시간을 개선합니다.
• 사용자 경험 개선: 더 빠른 응답 시간은 더 나은 사용자 경험으로 이어집니다.

고려사항:

• 캐시 무효화: 사용자가 항상 최신 데이터를 볼 수 있도록 적절한 캐시 무효화 전략을 구현하세요.
• 캐시 크기: 애플리케이션의 필요에 따라 적절한 캐시 크기를 선택하세요.

6. API 호출 최적화

API 호출의 효율성은 Next.js 애플리케이션의 전반적인 성능에 직접적인 영향을 미칩니다. API 상호 작용을 최적화하기 위한 몇 가지 전략은 다음과 같습니다:

• 요청 크기 줄이기: 실제로 필요한 데이터만 요청하세요. 사용하지 않는 대량의 데이터를 가져오는 것을 피하세요. GraphQL이나 API 요청의 필드 선택과 같은 기술을 사용하여 필요한 데이터를 정확히 지정하세요.
• 데이터 직렬화 최적화: JSON과 같은 효율적인 데이터 직렬화 형식을 선택하세요. 훨씬 더 높은 효율성이 필요하고 추가적인 복잡성을 감수할 수 있다면 프로토콜 버퍼와 같은 바이너리 형식을 사용하는 것을 고려해 보세요.
• 응답 압축: API 서버에서 압축(예: gzip 또는 Brotli)을 활성화하여 응답 크기를 줄이세요.
• HTTP/2 또는 HTTP/3 사용: 이러한 프로토콜은 멀티플렉싱, 헤더 압축 및 기타 최적화를 통해 HTTP/1.1에 비해 향상된 성능을 제공합니다.
• 올바른 API 엔드포인트 선택: 애플리케이션의 특정 요구에 맞게 API 엔드포인트를 효율적으로 설계하세요. 대량의 데이터를 반환하는 일반적인 엔드포인트는 피하세요.

7. 이미지 최적화

이미지는 종종 웹페이지 전체 크기의 상당 부분을 차지합니다. 이미지를 최적화하면 로드 시간을 크게 개선할 수 있습니다. 다음 모범 사례를 고려해 보세요:

• 최적화된 이미지 형식 사용: JPEG, PNG와 같은 구형 형식에 비해 압축률과 품질이 더 좋은 WebP와 같은 최신 이미지 형식을 사용하세요.
• 이미지 압축: 품질을 너무 많이 희생하지 않으면서 이미지를 압축하세요. ImageOptim, TinyPNG와 같은 도구나 온라인 이미지 압축기를 사용하면 이미지 크기를 줄일 수 있습니다.
• 이미지 크기 조정: 웹사이트에 맞는 적절한 크기로 이미지 크기를 조정하세요. 큰 이미지를 작은 크기로 표시하는 것은 대역폭을 낭비하므로 피해야 합니다.
• 반응형 이미지 사용: 사용자의 화면 크기와 기기에 따라 다른 크기의 이미지를 제공하려면 `<picture>` 요소나 `<img>` 요소의 `srcset` 속성을 사용하세요.
• 지연 로딩(Lazy Loading): 이미지가 뷰포트에 보일 때만 로드되도록 지연 로딩을 구현하세요. 이는 페이지의 초기 로드 시간을 크게 줄일 수 있습니다. Next.js의 `next/image` 컴포넌트는 이미지 최적화와 지연 로딩을 기본적으로 지원합니다.
• 이미지에 CDN 사용: CDN에 이미지를 저장하고 제공하여 전송 속도와 안정성을 향상시키세요.

결론

Next.js 요청 워터폴은 웹 애플리케이션의 성능에 큰 영향을 미칠 수 있습니다. 워터폴의 원인을 이해하고 이 가이드에서 설명한 전략을 구현함으로써 데이터 로딩을 최적화하고 로드 시간을 줄이며 더 나은 사용자 경험을 제공할 수 있습니다. 최상의 결과를 얻기 위해 애플리케이션의 성능을 지속적으로 모니터링하고 최적화 전략을 반복적으로 개선하는 것을 잊지 마세요. 가능할 때마다 병렬 데이터 페칭을 우선시하고, SSR과 SSG를 활용하며, API 호출 및 이미지 최적화에 세심한 주의를 기울이세요. 이러한 핵심 영역에 집중함으로써 사용자를 만족시키는 빠르고 성능이 뛰어나며 매력적인 Next.js 애플리케이션을 구축할 수 있습니다.

성능 최적화는 일회성 작업이 아닌 지속적인 과정입니다. 정기적으로 코드를 검토하고, 애플리케이션의 성능을 분석하며, 필요에 따라 최적화 전략을 조정하여 Next.js 애플리케이션이 빠르고 반응성 있게 유지되도록 하세요.