Next.js에서 데이터 가져오기

Next.js는 페이지 콘텐츠에 대한 데이터를 가져오는 다양한 방법을 제공합니다. 애플리케이션에 적합한 접근 방식을 선택하면 Next.js가 제공하는 성능 이점을 활용할 수 있습니다. 먼저 사용 가능한 다양한 방법을 설명하는 것으로 시작한 다음 전자 상거래 사용 사례 예제를 설명합니다.

정적 사이트 생성 대 서버 측 렌더링

정적 렌더링

귀하의 페이지는 정적 HTML로 생성되며 이는 컴파일 시간에 수행됩니다. 그런 다음 사용자가 페이지를 요청할 때 사용자에게 제공됩니다.



이것은 getStaticProps API를 사용하여 수행됩니다. Next.js가 이 API만 사용하여 데이터를 가져오는 페이지를 찾으면 빌드 시 이 API에서 반환된 소품을 사용하여 페이지를 미리 렌더링합니다.

콘텐츠는 CDN에서 캐싱 및 제공될 수 있습니다. 이 접근법의 장점:

매우 뛰어난 성능 - 콘텐츠를 렌더링하는 데 서버가 필요하지 않습니다.

항상 사용 가능 - 사용자가 페이지를 요청할 때 데이터베이스가 필요하지 않습니다.

백엔드 서비스에 대한 부하 감소 - 백엔드는 컴파일 중에만 필요합니다.

하지만 콘텐츠는 미리 생성되기 때문에 오래되었을 수 있으며 콘텐츠를 새로 고치려면 추가 배포가 필요합니다.

서버측 렌더링

사용자가 페이지를 요청하면 Next.js는 서버에서 콘텐츠를 생성하여 사용자에게 반환합니다. 이것은 요청에 따라 수행됩니다.



Next.js는 getServerSideProps API가 페이지에서 사용될 때 서버측 렌더링을 활성화합니다.

서버가 요청을 수신하고 콘텐츠를 생성할 준비가 되어 있기 때문에 추가 배포가 필요하지 않으며 사용자는 항상 최신 콘텐츠를 얻을 수 있지만 페이지는 정적 사이트 생성의 이점을 잃게 되고 페이지에 추가 처리 시간이 필요합니다. 서버에서 페이지를 빌드합니다.

사용 사례: 전자상거래

데이터를 다르게 가져오도록 애플리케이션의 각 페이지를 구성할 수 있습니다. 전자 상거래 앱을 예로 들어 보겠습니다.

제품 카탈로그 페이지: 정전기 발생

제품 목록 페이지에는 사용 가능한 모든 제품 목록이 필요합니다. getStaticProps를 사용하여 정적 HTML 페이지를 생성하고 Next.js는 빌드 시간 동안 외부 데이터 소스에서 콘텐츠를 가져올 수 있습니다.

export async function getStaticProps() {
  return {
    props: {
      products: await getProducts()
    }
  };
}

const Products = ({ products }) => {
  return (
    <section>
      <h1>Products</h1>
      <ul>
        {products.map((product) => (
          <li key={product.id}>{product.name}</li>
        ))}
      </ul>
    </section>
  );
};

export default Products;

제품 세부 정보 페이지: 동적 경로를 사용한 정적 생성

각 제품에 대한 페이지가 필요하며 이를 위해 getStaticPaths를 사용하여 제품 ID 목록을 반환합니다. 각 제품 ID에 대해 정적 제품 페이지를 생성합니다.

dynamic routes을 사용하는 페이지page/products/[id].js를 만듭니다.

// Pre-render the path of each product
export async function getStaticPaths() {
  const products = await getProducts();

  const paths = products.map((product) => ({
    params: { id: product.id }
  }));

  return { paths };
}

// Pre-render the page with data related to each product
export async function getStaticProps({ params }) {
  return {
    props: {
      product: await getProduct(params.id)
    }
  };
}

const Product = ({ product }) => {
  return (
    <section>
      <h1>{product.name}</h1>
    </section>
  );
};

export default Product;

장바구니: 정적 생성 + 클라이언트 측 가져오기

장바구니의 콘텐츠는 각 사용자마다 다르므로 페이지 레이아웃을 정적 콘텐츠로 렌더링한 다음 브라우저에서 클라이언트측 데이터를 로드할 수 있습니다.

const ShoppingCart = () => {
  const { data } = useSWR('/api/cart', fetchCart);

  return (
    <section>
      <h1>Your Cart</h1>
      <ul>
        {data.products.map((product) => (
          <li key={product.id}>{product.name}</li>
        ))}
      </ul>
    </section>
  );
};

export default ShoppingCart;

위의 예에서는 SWR을 사용하여 데이터 가져오기를 처리합니다.

결론

Next.js는 빠른 페이지 로드 경험에 필요한 이점이 있는 정적 사이트 생성을 통해 데이터를 가져오는 다양한 방법을 지원합니다. 콘텐츠를 렌더링하는 브라우저의 부담을 덜고 컴파일 시간 동안 미리 준비하십시오.

이 접근 방식은 Shopify에서 콘텐츠를 가져오고 정적 HTML 콘텐츠를 빌드하는 전자 상거래 웹 사이트인 Go Bare과 같은 프로젝트에서 시연됩니다. 사용자는 Shopify에서 직접 요청하지 않고 CDN에서 제공되는 콘텐츠를 보고 있습니다. 사용자가 장바구니에 있을 때 장바구니 세션과 관련된 데이터를 요청하기 위해 Shopify로 클라이언트 측 가져오기를 수행합니다.