컴포넌트 스트리밍 적용하기에서 searchParams 비동기 변경관련 질문
안녕하세요.
컴포넌트 스트리밍 적용하기에서 searchParams가 Promise 값을 반환하는 형태로 바뀌었는데요.
Suspense에서 key 값을 어떻게 처리하나요?
searchParams 자체는 비동기 처리하는 함수를 분리해서 검색이 가능하게는 처리가능한데 Suspense는 마땅한 방법이 없어보여서 질문 드려봅니다.
searchParams: Promise<{
q?: string;
}>;답변 1
2
안녕하세요 이정환입니다.
다음과 같이 비동기적으로 불러온 쿼리스트링의 값으로 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 컴포넌트의 스트리밍은 해제되지 않으니 걱정하지 않으셔도 됩니다!
0
감사합니다. 확인했습니다 ^^
Page의 async를 제거하고 분리하는 이유가 Suspense 자체를 비동기 함수안에서는 선언 못하는 제약이 있어서인줄 알았는데요.
Suspense 자식안에 fetch를 실행하는 비동기 함수를 넣기 위함이였군요!?
이해하는데 도움이 되었습니다. 감사드립니다.
버셀로 서버 배포 후 접속 시 500 에러 발생
0
66
2
컴포넌트와 레이아웃
0
53
2
@/styles/globals.css'
0
50
2
풀라우트캐시 동작 원리에서 데이터 캐시 관련 질문
0
71
2
next.js 프로젝트
0
68
1
Next.js + Tanstack Query BFF 구조 질문
1
82
2
Next.js 사전렌더링 이해하기 부분
0
84
2
모달 관련 질문
0
87
3
렌더링 관련 질문
0
108
2
중복으로 하나의 api를 요청할 때 캐싱 옵션 통일화
0
97
2
라우트 세그먼트 옵션 강좌 노트에 사소한 제보 남깁니다.
0
95
2
SSR시 context에 params말고 query를 사용하면 안되나요?
0
106
2
npx prisma db push 시 에러가 뜹니다.
0
131
3
vercel 배포를 실패하였습니다.
0
150
3
Image 컴포넌트 사용시 브라우저 콘솔에 경고는 왜 뜨는걸까요?
0
93
2
getServerSideProps 함수와 SSR의 관계
0
118
6
없는 페이지인데 풀라우트캐시로 저장이 되는 이유가 궁금합니다
0
93
2
실제 프로젝트에서 SSR 사용에 관해서 질문드립니다.
0
145
2
일반적인 nextjs project architecture에 대하여..
0
120
2
2.14 Search에서 작성한건 static이긴하지만 CSR이 아닌가요?
0
101
2
배포 시 오류 발생
0
111
2
백엔드 서버 오류납니다.
0
107
2
취약점 제거시 nestjs 버전 문제가 생길까요?
0
117
1
eslint.config.mjs 내 rules 어떻게 설정 하나요?
0
130
1