예외 처리

(이 포스팅은 Next.js App Router 15 버전을 기준으로 작성되었습니다. 라우터 캐시의 경우 15 버전을 기준으로 이전 버전과 동작 양상이 다릅니다. 이전 버전을 사용하시는 분들은 참고해 주세요.) (클라이언트) 라우터 캐시 이 부분에 대해 피그마로 번역버전을 만들어봤습니다. 캐시 레이어 다이어그램 아래는 정적 렌더링 기준으로 캐시가 어떻게 상호작용하고 동작하는지를 보여주는 다이어그램입니다. 제가 체크한 부분이 바로 (클라이언트) 라우터 캐시입니다. App Router의 독자적인 캐시들 중 라우터 캐시가 다른 캐시들과 다른 점은 유일하게 클라이언트 사이드에서 동작한다는 것입니다. (Request Memoization은 App Router의 독자적인 기능이 아니라 리액트 차원에서 제공하..

(이 글은 Next.js App Router 15 버전을 기준으로 작성되었으며 현 시점 실험적 기능인 ppr(Partial Prerendering)을 사용하지 않았습니다.) 데이터 페칭시 cache 옵션 부여지난 포스팅에서 "데이터 fetch시 cache: no-store 옵션을 추가했는데도 html파일이 생성된다." "이상하다. 제 예상과 다르다"라고 언급한 적이 있습니다. [Next.js] App Router의 클라이언트 컴포넌트의 자바스크립트는 서버에서 실행될 수도 있다사실 제목 자체는 관심을 끌기 위한 문장입니다. 세부사실을 명시하지 않았죠. 결론부터 말하자면 클라이언트 컴포넌트의 “일부 자바스크립트”는 서버에서 실행될 수도 있고 실행되지 않을unhandled.tistory.com 아래는 위 ..

(이 포스팅은 Next.js App Router 15 버전을 기준으로 작성되었으며, 제 주관적인 추측과 확실하지 않은 가설에 관한 내용이 대부분입니다. 그러므로 명백하고 정확한 정보를 원하신다면 적합한 글이 아닐 가능성이 높습니다.) 이 탐구는 며칠 전 같은 페이지라도 주소창 접근 시와 클라이언트 사이드 내비게이션으로 접근 시 반환하는 데이터가 다르다는 (공식문서에 대놓고 적혀있는) 놀라운 사실을 알게 된 후 즉흥적으로 해본 실험에서 시작되었습니다. 페이지가 정적 렌더링 된다면한 페이지가 정적 렌더링(빌드타임 렌더링)되면 그 경로에 대응되는 파일이 빌드 폴더에 생성됩니다. 예를 들어 app/list/page.tsx가 존재하고 이 페이지가 정적 렌더링 된다면 .next/server/app/list.htm..

(이 글은 Next.js App Router 15 버전을 기준으로 한 포스팅입니다.) 평소처럼 테스트를 하다가 이상한 현상을 마주했습니다. DB 업데이트Supabase에서 데이터베이스를 업데이트했습니다. 프로젝트 데이터가 몇 개 더 추가되었죠. 이 페이지는 정적 렌더링(빌드타임 렌더링)되므로 데이터베이스를 업데이트해도 새로 빌드하기 전에는 이전 stale 한 목록을 보여줄 것입니다. 프로덕션 환경에서 새로운 데이터를 보고 싶다면 빌드를 해야 합니다. npm run buildnpm start 빌드 후 프로덕션 환경하지만 이상했습니다. 여전히 같은 목록을 보여주고 있군요. 로컬 개발 환경에서는 정적 렌더링 페이지도 동적 렌더링 방식과 유사하게 동작해서 그런 것 같습니다. 해결법빌드 폴더를 삭제하고 다시 빌..