인프런 커뮤니티 질문&답변
작성한 질문수
컴포넌트 스트리밍 적용하기에서 searchParams 비동기 변경관련 질문
해결된 질문
작성
·
72
0
안녕하세요.
컴포넌트 스트리밍 적용하기에서 searchParams가 Promise 값을 반환하는 형태로 바뀌었는데요.
Suspense에서 key 값을 어떻게 처리하나요?
searchParams 자체는 비동기 처리하는 함수를 분리해서 검색이 가능하게는 처리가능한데 Suspense는 마땅한 방법이 없어보여서 질문 드려봅니다.
searchParams: Promise<{
q?: string;
}>;답변 1
2
이정환 Winterlood
지식공유자
안녕하세요 이정환입니다.
다음과 같이 비동기적으로 불러온 쿼리스트링의 값으로 key 값을 설정해주시면 됩니다 😃 (key값을 설정하는 부분은 동일해요!)
export default async function Page({
searchParams,
}: {
searchParams: Promise<{
q?: string;
}>;
}) {
const { q } = await searchParams;
return (
<Suspense key={q || ""} fallback={<BookListSkeleton count={3} />}>
<SearchResult q={q || ""} />
</Suspense>
);
}참고로 이때 페이지 컴포넌트가 비동기 컴포넌트가 되더라도 Suspense를 이용해 설정한 SearchResult 컴포넌트의 스트리밍은 해제되지 않으니 걱정하지 않으셔도 됩니다!
감사합니다. 확인했습니다 ^^
Page의 async를 제거하고 분리하는 이유가 Suspense 자체를 비동기 함수안에서는 선언 못하는 제약이 있어서인줄 알았는데요.
Suspense 자식안에 fetch를 실행하는 비동기 함수를 넣기 위함이였군요!?
이해하는데 도움이 되었습니다. 감사드립니다.