[Next.js] Loading UI

간단히  Loading UI에 대하여 학습한 내용을 간결하게 정리하고자 한다.

 

2. Loading UI

Next.js 14의 App Router에서 비동기 컴포넌트가 로드되는 동안 사용자에게 로딩 상태를 표시하는 기능 

사용자가 웹 애플리케이션을 사용할 때 비동기 작업이 완료될 때까지 기다려야 하는 상황에서 유용

2-1 Loading UI는 왜 중요한가? 

1. 사용자 경험 개선 : 로딩 중인 상태를 명확히 표시하지 않으면 ,사용자 입장에서는 현재 어떤 상황이 일어나는지 알 겨를이 없기 때문에, 이는 웹사이트를 이용하는 클라이언트의 입장에서는 불안감과 , 사용자 경험을 하락시킨다.

이러한 요인은 불필요한 클릭, 페이지 이탈 가능성을 높인다. 

이러한 상황에 Loading UI 를 적절히 활용하게 될 경우 사용자 유지율을 높이고, 사이트에 대한 신뢰성을 향상 시킬 수 있으며, 나아가 페이지의 일부분이 빠르게 랜더링 되어 SEO의 성능을 향상 시킨다. 사용자가 페이지를 더 빠르게 접근할 수 있도록 한다. 

export default function Loading() {

  return <>Product Loading</>;

}

로딩 상태를 표현하는 간단한 컴포넌트

 

해당 컴포넌트를 Import 하여 아래와 같이 사용

import NewProductList from "@/components/NewProductList";

import { Suspense } from "react";

import Loading from "./loading";

export default async function Home() {

  return (

    <div className="p-8 m-4">

      <h1>Sparta Shop</h1>

      <Suspense fallback={<Loading />}>

        <NewProductList />

      </Suspense>

    </div>

  );

}