Next.js page / layout / template 차이

최종 수정 : 2024-06-07

Page

말 그대로 페이지를 말한다. 하나의 페이지는 하나의 루트에 단일한 UI를 나타낸다.

 

Layout

페이지를 감싸는 레이아웃을 지정한다. 즉, 여러 페이지들이 공유하는 UI이다. 페이지를 이동할 때 리렌더링이 발생하지 않기에 상태를 유지한다. 또한 중첩하여 Layout을 사용할 수 있다. 각 부모 레이아웃은 React children props를 사용하여 자식 레이아웃을 래핑한다. 그러나 부모 자식 간에 데이터를 전달하는 것은 불가능하다. 이에 대해서는 레이아웃은 데이터를 fetch할 수 있다는 점을 활용하여 라우트에서 동일한 데이터를 여러번 fetch 함으로써 해결할 수 있다. React는 자동으로 중복된 요청을 제거하므로 성능에 영향을 미치지 않는다.

 

가장 최상단에 있는 레이아웃을 루트 레이아웃이라고 한다. 레이아웃은 기본적으로 Server Component 이지만 Client Component로 전환할 수 있다.

 

Template

레이아웃과 유사하게 자식 레이아웃이나 페이지를 감싸는 역할을 한다. 그러나 레이아웃은 라우트 간에 지속되고 상태를 유지하는 반면, 템플릿은 이동시 각각의 자식에 대해 새로운 인스턴스를 생성한다. 사용자가 템플릿을 공유하는 라우트간 이동할 때마다 컴포넌트의 새로운 인스턴스가 생성되고 DOM 요소가 다시 생성도며 상태가 유지되지 않고 Effect가 다시 동기화된다.

 

특정한 경우, 레이아웃보다는 템플릿이 더 적합할 수 있다.

• useEffecr와 useState에 의존하는 기능들 ex) 페이지 조회수, 페이지별 피드백 폼
• 기본 프레임워크 동작을 변경해야 하는 경우

---

참고 자료

https://velog.io/@cherie/Next.js-Next.js-Page-Layout-Template-%EB%B0%B0%EC%9A%B0%EA%B8%B0

[Next.js] Next.js Page, Layout, Template 배우기

https://www.vigorously.xyz/docs/nextjs/nextjs-doc-pages-and-layouts/

페이지와 레이아웃