Dandy Now!
  • [ 언어·프레임워크/Next.js ]
    [Next.js] 인프런 강의 "Next.js 필수 개발 가이드 3시간 완성!" 정리(Loading UI)
    2024년 02월 11일 14시 34분 33초에 업로드 된 글입니다.
    작성자: DandyNow
    728x90
    반응형

    📌 Loading UI

    1. React Suspense

    // src/app/layout.tsx

// (생략)
import { Suspense } from "react"; // 추가

// (생략)

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en" data-theme="dark">
      <body className={inter.className}>
        <NavBar />
        <main>
          {/* Suspense 컴포넌트 적용 */}
          {/* fallback에는 텍스트, 아이콘, 애니메이션 컴포넌트 적용 가능 */}
          {/* 검색 엔진 봇이 보는 페이지는 빈 페이지가 아닌 로딩 컴포넌트가 렌더링 된 문서 */}
          {/* server는 사용자 페이지가 렌더링 될 때까지 대기한 후 추가 데이터를 client에 전달 → 스트리밍 */}
          <Suspense fallback={<p>Loading...</p>}>{children}</Suspense>
        </main>
      </body>
    </html>
  );
}

     

    [그림 1] React Developer Tools에서 suspense를 확인 가능, true로 설정한 화면

     

    2. loading.tsx

    • loading.tsx 컴포넌트를 작성하면 React Suspense 컴포넌트를 사용하지 않아도 된다. 
    // src/app/loading.tsx

import React from "react";

const Loading = () => {
  return <div>Loading...</div>;
};

export default Loading;
    // src/app/layout.tsx

// (생략)
import { Suspense } from "react"; // 추가

// (생략)

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en" data-theme="dark">
      <body className={inter.className}>
        <NavBar />
        <main>
          {/* React Suspense 컴포넌트를 사용 안해도 된다. */}
          {/* <Suspense fallback={<p>Loading...</p>}>{children}</Suspense> */}
          {children}
        </main>
      </body>
    </html>
  );
}

     

    3. 로딩 애니메이션(daisyUI)

    // src/app/loading.tsx

import React from "react";

const Loading = () => {
  // https://daisyui.com/components/loading/
  return <span className="loading loading-spinner text-primary"></span>;
};

export default Loading;

     

    728x90
    반응형
    저작자표시 비영리 변경금지

    '언어·프레임워크 > Next.js' 카테고리의 다른 글

    [Next.js] 인프런 강의 "Next.js 필수 개발 가이드 3시간 완성!" 정리(컴포넌트 오류 처리)  (0) 2024.02.11
    [Next.js] 인프런 강의 "Next.js 필수 개발 가이드 3시간 완성!" 정리(not-found)  (0) 2024.02.11
    [Next.js] 인프런 강의 "Next.js 필수 개발 가이드 3시간 완성!" 정리(섹션 2: 라우팅과 네비게이션)  (0) 2024.02.07
    [Next.js] 인프런 강의 "Next.js 필수 개발 가이드 3시간 완성!" 정리(섹션 1: Styling)  (0) 2024.02.06
    [Next.js] 인프런 강의 "Next.js 필수 개발 가이드 3시간 완성!" 정리(섹션 0: 기초)  (0) 2024.02.04
      댓글

    티스토리툴바