티스토리 뷰
반응형
아래의 Dynamic API들이 15부터 비동기로 동작한다.
- cookies
- headers
- connection
- draftMode
- searchParams
- params
아래처럼 await를 붙여야한다.
async function Page({ params }) {
// asynchronous access of `params.id`.
const { id } = await params
return <p>ID: {id}</p>
}
해당 방식은 codemod로 1차 수정, 앱 내부 잔존버그들 일일히 수정
$ npx @next/codemod@canary next-async-request-api .
서버컴포넌트의 경우에는 params을 await로 비동기처리해야하고
클라이언트 컴포넌트는 React.use hook을 사용해서 Promise를 풀어내야함
해당 변경이 있기전에 서버에 요청이 와야 처리하는 구조였지만
사용자 요청에 따라 데이터가 바뀔 수 있는 부분에만 (요청 의존적) 비동기 처리를 하여 요청을 기다리고,
요청이 필요하지 않은 작업은 미리 처리하여 속도를 개선시켰다는 내용
반응형
'프로그래밍 > React' 카테고리의 다른 글
브라우저에서 대용량 파일 block없이 읽기 (0) | 2022.10.28 |
---|---|
유저액션 중심의 컴포넌트 테스트를 위한 도구 testing library (1) | 2022.09.27 |
React Query - useQuery (0) | 2022.09.14 |
요즘 핫한 React Query (0) | 2022.09.14 |
useLayoutEffect(2) SSR (0) | 2022.07.10 |
댓글
반응형
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday
농담곰의 고군분투 개발기