Next.js-13버전-차이점
2023-05-16
Next.js 가 13으로 업데이트가 되고
기존 Pages 라우터에서 App 라우터가 추가되었고
13.4버전 기준 App 라우터도 Stable 버전으로 들어가게 되면서
정식버전 으로 사용 할 수 있게 되었다
이 포스트에서는 App 라우터를 어떻게 사용 할 수 있는지 정리 해보고자 한다
폴더 구조
App 라우터는 Pages 라우터와 같이 app 폴더를 root 디렉토리로써 시작한다
기존 Pages 라우터와 비교해 바뀐점이 있긴 하지만 폴더를 기준으로 라우팅을 한다는 점은 같다
App 라우터와 Pages 라우터는 동시에 사용 가능하지만 언제나 App 라우터가 더 높은 우선권을 가진다
라우팅
라우팅에서 바뀐점은 크게 두가지인데
그중 하나는 파일 이름의 변경이다
기존 Pages 라우터에서는 index.js 를 사용했지만
App 라우터에서는 page.js 를 사용한다
두번째는 동적 라우팅의 변경이다
(pages 라우팅 동적 라우팅 사진)
기존 Pages 라우팅 에서는 위와 같은 방식으로 자바스크립트 파일 이름으로 동적 라우팅을 했지만
(App 라우팅 동적 라우팅 사진)
App 라우팅에서는 위와 같이 폴더 이름을 기준으로 동적 라우팅을 한다
또한 catch-all segment 같은 경우는 기존 파일에 조건을 주는 방식에서
폴더에 조건을 주는 방식으로 바뀌엇다
[…slug].js → […slug]/page.js
랜더링
기존 Pages 라우터 에서는 React 코드를 HTML로 미리 생성하고
Hydrated 되도록 클라이언트에 전송해 왔는데 이를 구현하기 위해
클라이언트에 추가 Javascript가 필요로 했었는데
Server Component를 도입한 이후 Javascript의 양이 줄어 로드 속도가 늘고
어플리케이션의 크기가 커져도 크기가 늘어나지 않는다
Server component 는 data를 가져오는(fetch) 경우나
백엔드 리소스에 접근(DB), 토큰, 키같은 민감함 파일에 접근 하는 경우
Server component 가 사용되고
그외 React의 기능들(useState, useEffect)나 웹 API(onClock)에 접근할때는
client 컴포넌트를 사용한다
모든 컴포넌트는 기본적으로 Server 컴포넌트이기에
Client 컴포넌트를 쓰기위해선 컴포넌트 최상단에
“use client” 지시자를 사용해야 한다
이와 같은 방법을 통해 Client 컴포넌트의 사용이 가능하며
pre-render 와 hydrated 또한 그대로 적용된다
Fetching
기존 data fetching에 사용되던 getServerProps() getInitialProps() 함수는 없어지고
컴포넌트 내에서 사용되는 fetch 옵션에 따라
getServerProps() getInitialProps() 함수를 대신한다
static data fetching
기본 설정으로 무조건 캐시된 데이터를 가져온다
Revalidating Data
revalidate 시간 만큼 캐싱된 데이터를 가지고 있다 이후 요청이 들어오면
먼저 캐싱된 데이터를 반환하고 다시 캐싱한다
단위는 초단위이다
Dynamic Data Fetching
캐싱을 하지 않는다
마치며
Next 13 버전은 아직 과도기 버전이라 생각된다
작성일 기준 App 라우터도 stable 버전이 되었지만 아직 여러 버그가 존재하고
App 라우터와 Pages 라우터를 동시에 지원하고 있는 상황이기도 하지만
앞으로의 업데이트가 기대된다
Next를 본격적으로 시작한게 13이 막 업데이트 되었을때라
개인적으론 적응하기는 쉬웠지만 12버전을 공부한 사람들은 적응이 힘들거라 생각된다
나는 12 13버전을 동시에 공부했지만 랜더링 방식과 데이터 fetching 방식의 변경이
많이 혼란스러웠기에 블로그를 만들면서 혼란을 겪었던 부분을 이 포스팅을 통해
조금이나마 정리해 보았다
그리고 제발 output export 설정을 했을때 route handler가 build가 되지 않는
버그좀 빨리 수정해줬으면 좋겠다…
공식 문서를 다시 확인해보니 아직 해당 기능이 지원되지 않는게 맞다
이 내용은 다른 포스팅에서 좀더 자세하게 다루겠다
