티스토리 뷰

프로그래밍/React

nextjs15 migration - 1

수박수박좋다 2025. 1. 17. 01:01
반응형

아래의 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를 풀어내야함

해당 변경이 있기전에 서버에 요청이 와야 처리하는 구조였지만 

사용자 요청에 따라 데이터가 바뀔 수 있는 부분에만 (요청 의존적) 비동기 처리를 하여 요청을 기다리고,
요청이 필요하지 않은 작업은 미리 처리하여 속도를 개선시켰다는 내용

 

반응형
댓글
반응형
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
농담곰의 고군분투 개발기