Static 페이지 안에 어떤 컴포넌트가 있고, useEffect, useSearchParams 등 Client Component에서만 사용할 수 있는 기능과, 서버에서 가동되는 비동기 fetch 메소드가 포함되어 있다.

이 컴포넌트 하나 때문에 페이지를 전부 Dynamic 페이지로 가져갈 수 없다면 어떻게 할까?

<aside> 💡

<Suspense>를 활용하여 해당 컴포넌트를 사전 렌더링에서 배제한다.

</aside>

Suspense?

React 내장 컴포넌트로, 내부의 컴포넌트는 사전 렌더링에서 배제되고 클라이언트 측에서 렌더링 된다.

fallback 속성 내부에 대체 UI를 작성하면, 그 안에 있는 비동기 작업이 끝날 때까지 suspense 상태로 남아fallback에 있는 UI가 노출된다.

import { ReactNode, Suspense } from "react";
import Searchbar from "../../components/searchbar";

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

export default function Layout({ children }: { children: ReactNode }) {
  return (
    <div>
      <Suspense fallback={<Loading />}>
        <Searchbar />
      </Suspense>
      {children}
    </div>
  );
}