App router에는 App이 없다.
만약 url이 /product/detail/14
라고 한다면,
detail/[id]/page.tsx가 가장 먼저 호출된다.
그 뒤에 나머지 컨벤션 - layout이나 template -이 호출되고, 현재 라우트의 가까운 컨벤션들이 차례로 호출된 뒤에 최종적으로 app 디렉터리 바로 아래의 layout.tsx - root layout이라 하겠다. - 가 호출된다.
혹자는 트리 구조를 보고는 root layout이 모든 라우트에서 사용하므로 여기서 app에 필요한 기본적인 것들을 설정해두려고 할 수 있다.
그러나 호출 순서로 보면 현재 라우트에서 필요한 app의 어떤 값이 있다 해도 현재 라우트에서는 참조할 수 없다. 만약 인증을 root layout에서 한다면, 인증이 풀렸을 때 - token이 만료되는 등 - 현재 라우트를 렌더링하지 못하게 된다.
쿠키
생성 방법은 여러가지 인데,
써드파티 라이브러리를 사용한다면 client component에서만 생성 가능하다. client 환경, 그러니까 브라우저에서 읽는 코드가 아니라면 document를 찾을 수 없으니 오류가 발생한다. next.js는 pages router에서도 getiInitialProps의 context.[req|res].cookie를 통해서만 가능했다.
next/headers에서 제공하는 cookies 모듈을 사용하면 client component가 아닌 곳에서만 생성 가능하다. 다만 server component에서는 읽기만 가능하고, 쓰기를 하려면 route handler와 server action 영역에서 해야 한다.
둘은 모두 client component에서 호출할 수 있다.
이 이상한 난맥상으로 인증 토큰을 http header에 넣는 작업이나 넣은 후의 신뢰도가 굉장히 떨어진다.
generateStaticParams와 cookies 모듈의 충돌.
cookies() expects to have requestAsyncStorage, none available.정적 페이지를 미리 생성하기 위해 generateStaticParams를 사용하면 해당 라우트에서 위와 같은 오류를 반환한다.
document.cookie를 server component에서 읽는 방법은 next/headers의 cookies 모듈을 통해서만 가능하다. (현재까지 확인하기로는) 즉 cookie 인증 방식을 선택하면 정적 페이지 생성이 막힌다.
------ 라고 생각 했으나 일시적으로 뭐가 풀려 돌아갔던 것 뿐,
라우트 하위에 client component가 있고, 해당 라우트를 렌더링할 때 호출되는 상위의 어떤 곳에서건 cookies를 호출해서 사용한 곳이 있으면 발생한다. 크리티컬 버그...
api 모듈을 만들어 쓰는 - axios의 인스턴스를 사용하는 등의 - 경우,
인스턴스를 만들어 둔 파일에서 cookies를 불러와 썼고 이 api를 호출한 라우트나 컴포넌트 하위에 client component가 있다면 트리 중에 client component가 있어서 쓸 수 없다는 오류를 준다. 가지가지...
인증
ck editor - ver.5 by online builder
- dynamic import X, => 내부 코드 중 self is not defined 에러 반환.
- dynamic import on server component => 내부 코드 중 window 인식 못함.
