인프런 커뮤니티 질문&답변

import BookItem from "@/app/components/book-item";
import BookListSkeleton from "@/app/components/skeleton/book-list-skeleton";
import { fetchSearchBooks } from "@/app/lib/fetch-search-books";
import { Suspense } from "react";

// export const dynamic = "force-dynamic";
// 특정 페이지 유형을 강제로 설정하는 dynamic 세그먼트 옵션
// 1. auto - 아무것도 강제하지 않는 옵션, 기본형
// 2. force-dynamic - dynamic 페이지를 강제하는 옵션
// 3. force-static - static 페이지를 강제하는 옵션
// 4. error - static 페이지를 강제하지만 이로 인해 오류가 발생할 것으로 예상되면 빌드과정에서 오류를 발생하는 옵션

async function SearchResult({ q }: { q: string }) {
  const searchBooks = await fetchSearchBooks(q);
  return (
    <>
      {searchBooks.map((book) => {
        return <BookItem key={book.id} {...book} />;
      })}
    </>
  );
}

export default async function Page({
  searchParams,
}: {
  searchParams: { q?: string };
}) {
  return (
    <Suspense fallback={<BookListSkeleton count={3} />}>
      <SearchResult q={searchParams.q || ""} />
    </Suspense>
  );
}

스켈레톤 UI를 적용하고 있는데 속도를 3g로 하고 새로고침을 해도 Suspence가 작동하지 않고 페이지가 랜더링 됩니다.
그리고 터미널에서 이런 에러가 발생하고 있습니다.

Error: Route "/search" used `searchParams.q`. `searchParams` should be awaited before using its properties. Learn more: https://nextjs.org/docs/messages/sync-dynamic-apis
    at Page (src/app/(with-searchbar)/search/page.tsx:31:37)
  29 |   return (
  30 |     <Suspense fallback={<BookListSkeleton count={3} />}>
> 31 |       <SearchResult q={searchParams.q || ""} />
     |                                     ^
  32 |     </Suspense>
  33 |   );
  34 | }
 GET /search?q=%ED%95%9C 200 in 47ms

SearchResult가 서버 컴포넌트로 만들어져 있어서 서버에서 이미 만들어 가져오기 때문에 fallback이 적용되지 않는건가요? SearchResult를 클라이언트 컴포넌트로 바꿔야지 해결되는 문제인가요?