Page Router

pages 폴더의 구조를 기반으로 페이지 라우팅을 제공한다

npx create-next-app@14 폴더이름

npm run dev 실행

_app.tsx

모든 페이지 역할을 하는 컴포넌트들의 부모 컴포넌트

모든 페이지의 부모 루트 컴포넌트이므로 헤더나 공통 레이아웃 등 코드를 추가하게되면 모든 페이지에 동일하게 적용가능!

_document.tsx

모든 페이지에 적용되는 메타태그 설정, 또는 폰트를 불러오거나, 구글 애널리틱스 같은 서드 파티 스크립을 넣는다든가.. etc
모든 페이지에 관련된 html 태그를 관리하기 위해 사용됨

Search 페이지 - 쿼리스트링

/search?q=검색어

왜 console이 두번 출력?

Next가 쿼리스트링을 읽는 과정 중에 컴포넌트를 한번 더 렌더링시킴
그래서 첫번째 router 에는 query가 비워져있다.

Book 페이지

[id].tsx

ook/:id

[...id].tsx

catch all segment

/book 은 대응못함

book/123/456/789
router.query.id= [123,456,789]

[[...id]].tsx

optional catch all segment

/book 대응가능

네비게이팅

<Link>
router.push('/search')

프리페칭 Pre-Fetching

빠른 페이지 이동을 위해 제공되는 기능!
페이지를 사전에 미리 불러온다

현재 사용자가 보고있는 페이지 내에서 이동할 가능성이 있는 모든 페이지들의 JS 코드를 밀리 불러와 놓는 것.

순서

초기접속이 완료된 이후 곧바로 페이지 이동이 이루어지기 전에 프리페칭이 발생해서 현재 페이지에서 이동할 수 있는 모든 페이지들의 JS코드를 미리 사전에 불러와 놓기 때문에 페이지를 이동할때에는 결국 추가적인 데이터를 서버에게 요청할 필요가 없어져서 기존 CSR 렌더링 장점대로 빠른 속도로 페이지 이동을 할 수 있따.

결론

주의 및 테스트

개발모드 npm run dev 로 구동시 프리패칭 동작안함.
npm run build -> npm run start

/에 접속하면 search, book.js 가 불러와진걸 네트워크 탭에서 확인가능.

search 버튼 눌러서 /search 로 이동하면 네트워크탭에는 아무런 요청도 추가적으로 발생하지않는다. 이미 프리페칭으로 /에 접속했을때 search.js가 불러와졋으니까!

하지만 /test로 이동하는 버튼을 누르면 네트워크탭에 test.js가 불러와진걸 확인할수있는데, 이는 위 search 와 book은 Link 태그로 이루어져있지만 test는 버튼 router.push 함수로 작용했기때문이다.

Link 태그만 프리페칭이 되는 것

router도 프리페칭하고싶다면

useEffect(()=>{

  router.prefetch('/test')

}, [])

만약 Link의 프리페칭 해제하고싶으면

<Link prefetch={false}>    </Link>

뭔가 변경하고 다시 프로덕션 서버에서 확인하려고하면
npm run build -> npm run start

---

왜 필요할까? Pre fetching이 없었다면..

사용자가 /search 라는 경로로, 즉 search 페이지로 접속 요청을 보냇다면 다시 전달되는 JS번들파일에는 search 페이지에 해당하는 코드들만 전달이 됨.

---

페이지를 이동하게되면 지금 초기 접속한 페이지에서 다른페이지로 이동하게될텐데, 넥스트는 초기 접속 시 현재접속 요청을 한 페이지에 해당하는 JS코드만 보내준다.

그렇기때문에 다시 페이지를 이동하려고 하면 이동하려는 페이지에 필요한 JS코드를 추가로 또 불러와야되는 과정이 필요함

이를 방지하기 위해 Pre - Fetching!