Next13을 알아보자 - 1 (Nested Layout, Server Components)

Next13에 적용된 내용을 정리하면 위와 같다. (흠 근데 패션도 그렇고 어디서 많이 본듯한데..?)

아무튼 핵심적인 변경 사항들을 같이 공부해 보며 하나씩 체크해 보자

---

Layout (Nested Layout)

가장 눈이 가는 기능은 Layout이다. Next, Nuxt를 둘 다 사용해 본 개발자들은 아마 분명 Next의 Layout 방식이 아쉬울 것이라고 생각할 것 같다. 하지만 레이아웃 기능이 생기면서 UI 공유에 대한 고민으로부터 조금 자유로워질 수 있을 것 같다.

export default function DashboardLayout({
  children, // will be a page or nested layout
}: {
  children: React.ReactNode,
}) {
  return (
    <section>
      {/* Include shared UI here e.g. a header or sidebar */}
      <nav></nav>

      {children}
    </section>
  );
}

위와 같이 layout.js를 폴더에 위치시키면 하위 페이지들은 layout에서 정의한 UI를 공유할 수 있다.

app/layout.js까지 이 layout들은 Nested Layout으로 아래와 같이 중첩된다.

app/layout.js -> app/dashboard/layout.js -> app/dashboard 내의 페이지들

 

예시 코드: https://github.com/bysxx/next-ts-template-tailwind/tree/master/app

---

Server Components

Next13에서는 새로운 Server Components 아키텍처에 대한 제공을 해준다.

우선 기본적으로 Next13에서 제공하는 컴포넌트는 기본적으로 전부 Server Components로 JS 번들 사이즈가 크게 줄기 때문에 초기 렌더링 속도를 높일 수 있다.

 

그렇기 때문에 대부분의 경우 Server Components 사용을 추천한다.

하지만 아래와 같은 경우에는 Client Components를 사용하라고 가이드를 해주고 있다.

 

• Add interactivity and event listeners (onClick(), onChange(), etc)
• Use State and Lifecycle Effects (useState(), useReducer(), useEffect(), etc)
• Use browser-only APIs
• Use custom hooks that depend on state, effects, or browser-only APIs
• Use React Class components

위와 같은 경우에는 아래와 같이 Client Components를 만들어 사용을 해야 한다.

'use client';

import { useState } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

그렇다면 Server Components와 Client Components를 함께 사용할 때는 어떤 점을 주의해야 할까?

 

'use client';

// ❌ This pattern will not work. You cannot import a Server
// Component into a Client Component
import ServerComponent from './ServerComponent';

export default function ClientComponent() {
  return (
    <>
      <ServerComponent />
    </>
  );
}

위와 같이 Client Components에서 Server Components를 호출하는 경우에는 동작하지 않는다고 한다.

 

흠.. 그렇다면 어떻게 위 문제를 해결해야 할까?

// client components
'use client';

export default function ClientComponent({children}) {
  return (
    <>
      {children}
    </>
  );
}

import ClientComponent from "./ClientComponent";
import ServerComponent from "./ServerComponent";

// Pages are Server Components by default
export default function Page() {
  return (
    <ClientComponent>
      <ServerComponent />
    </ClientComponent>
  );
}

이런 방식을 통해 불러와야 한다고 한다..

 

그리고 기존에 사용하던 패키지의 컴포넌트들 중 useEffect와 같은 훅을 사용하고 있는 함수가 있다면 동작을 하지 않을 수도 있다고 한다. 그런 경우에는 'use client'가 포함된 Wrapper를 만들어 사용해야 한다고 한다.

'use client';

import { AcmeCarousel } from 'acme-carousel';

export default AcmeCarousel;

 

 

Data Fetching에 대한 이야기도 있지만 이 부분은 Data Fetching을 다룰 때 같이 얘기해 보면 좋을 것 같다.

 

위 두 기능 모두 Next 13의 핵심 기능이면서 Next 12.x -> Next 13으로 마이그레이션을 한다고 했을 때 꽤 까다로울 것 같은 부분이다.

 

실제로 사용을 해봤을 때는 layout 기능이 참 마음에 들었다

 

Next13 + TypeScript Template: https://bysxx.tistory.com/19