// 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>
);
}
2. loading.tsx
loading.tsx 컴포넌트를 작성하면 React Suspense 컴포넌트를 사용하지 않아도 된다.