App Router
💡 알아두기
Page Router 방식일때는 Page 폴더 안에 이동할 경로대로 파일을 생성했다면
App Router 는 app 폴더를 기준으로 생성한다.
App Router 에서는 이동할 경로의 “폴더” 를 만들어주고 그 안에 반드시 page.tsx를 넣어주어야한다.
동적경로의 경우에도 마찬가지로 폴더를 생성한 후 그 페이지로 이동할 수 있도록 page.tsx 파일을 생성한다.
폴더 구조 방식 🔍
Layout 컴포넌트 👩🏻💻
이제 layout에 대해 정리를 해보자.
늘 헷갈렸던 부분이 각 파일들이 어디까지 영향을 미치는지가 너무 어려웠다. layout 에 대해서 빠르게 정리하면서 간단히 app router 폴더 구조에 대해서도 정리해보려 한다.
위에서 본 app 폴더 안에 search 라는 폴더를 만들었다. 그 안에 layout이 들어있는데 이는 사진에서 보이는 것처럼 search 폴더에만 적용되는 레이아웃이고, 이 폴더 안에 있는 파일들에 전부 적용이 된다.
따라서 search 폴더에 추가되는 파일들에는 적용이 되고 app 폴더 즉, search 폴더 바깥 쪽에는 이 레이아웃이 적용되지 않는다.
레이아웃은 중첩해서 사용할 수 있다! 딱 하나만 사용할 수 있다고 생각했는데 아니었다.
파일을 읽는 순서는 layout.tsx 파일을 먼저 읽고 그 다음 안에 있는 page.tsx내용을 읽어 그려나가는 구조이다.
RSC Payload 👩🏻💻
: Server Component
1차적으로 html 파일을 보여주고 페이지 이동을 요청하면 JS Bundle로 Client Component를 제공하는 것처럼 Server Component를 전달하는 것이 바로 RSC Payload이다.
그러면 JS Bundle을 실행할 때 RSC Payload 까지 합쳐서 페이지를 교체해준다.
코드를 작성하고 제대로 build 되었는지, payload 등을 확인하기 위해 프로덕션 모드를 켜주었다. (yarn build && yarn start)
기본적으로 next.js는 Static 파일과 Dynamic 파일로 구분짓는데 Static 은 SSG 렌더링 방식으로 프리페칭하고 Dynamic은 SSR 같은 동적으로 렌더링 되는 방식으로 프리페칭 시킨다.
→ 이 부분은 추후 캐싱 관련해서 공부하면서 더 자세히 정리해 볼 계획이다!
출처 : 한 입 크기로 잘라먹는 Next.js(15+)
https://www.udemy.com/course/onebite-next/
