Nextjs App Router를 사용할 때 흔히 저지르는 10가지 실수

출처:Vercel 공식 유튜브

route handler는 서버 컴포넌트에서 내부적으로 데이터를 페칭하기 위한 용도로 사용하지 않는다. 내부적으로 사용할 거라면 route handler가 아니라 외부 api 호출 함수를 따로 만들자.
route handler는 production 환경에서는 기본적으로 모든걸 캐싱한다.
route handler가 동적으로 호출되기 위한 opt-in 방법은 인자의 request를 프로그램적으로 읽거나 액세스 하거나, 또는 리퀘스트를 읽는 헬퍼 함수들을 호출하면 된다. (cookies(), headers()). 또한 POST 핸들러는 GET 핸들러와 달리 디폴트가 동적 핸들러이다.
route handlers는 서버를 호출할 수도 있지만 정적파일을 export해서 원하는 곳에 위치시킨 다음 응답에 반환할 수도 있다. 서버 상의 경로에 정적파일을 export 해서 경로를 호출하도록 할 수도 있고, 심지어 아마존 s3 버킷에 저장된 경로를 호출하도록 할 수도 있다.
Suspense를 사용할 때 주의할 점은 Suspense 의 바운더리가 항상 지연 응답을 원하는 컴포넌트의 외부에 있어야 한다는 것이다. 데이터 페칭 비동기 로직이 있는 컴포넌트가 있다고 가정하면, 해당 컴포넌트 내부가 아닌 외부에 Suspense가 있어야 한다.
서버 컴포넌트가 동적으로 호출되기 위한 opt-in 방법은 unstable_noStore() 헬퍼 함수 호출이다. 또한 서버 컴포넌트 내부에서도 route handler와 동일하게 header()나 cookies() 함수 등으로 리퀘스트를 읽을 수 있고 이 경우에도 동적으로 호출되게 opt-in 된다. url 파라미터나 서치파라미터는 컴포넌트 props로 가져올 수 있다.
리액트 컨텍스트 API는 서버/ 클라이언트 관계없이 적용된다.
또한 use client / use server같은 지시어가 명시되지 않으면 자식 컴포넌트는 부모 컴포넌트의 지시어를 따라간다. 그 외에 서버 컴포넌트와 클라이언트 컴포넌트간의 계층구조에는 아무런 제약이 없다.
서버 컴포넌트에서 데이터 뮤테이션이 일어난 이후에는 반드시 revalidatePath() 함수를 호출해서 데이터를 갱신해야 한다. state diff를 자동으로 리렌더링하는 클라이언트 컴포넌트와는 다르다. 서버 액션 함수가 데이터를 변경한다면 항상 함수 종료전에 revalidatePath()를 포함하도록 주의하자.
redirect API 는 넥스트js가 정의한 에러를 throw 하게 된다. 따라서 서버액션이나 try-catch 구문에서 사용할 때 return 문 이전에 사용하지 않도록 주의하자. 혹은 finally 블록에서 사용하도록 하자. 또한 클라이언트 컴포넌트에서 사용하지 않도록 주의해야 한다. 클라이언트 컴포넌트에서 유저를 리디렉션 시키고 싶다면 useRouter 훅을 사용하자.