Next13 - Component & CSS

 

Server / Client 컴포넌트 분리

Server component

• 초기에 서버측에서 렌더링되는 컴포넌트
• 서버 컴포넌트를 사용하면 초기 페이지 로딩 속도가 빨라지며, 클라이언트 측 자바스크립트 번들 크기가 줄어든다.

Client component

• 클라이언트 측 상호 작용을 추가할 수 있다.
• Next.js에서는 서버에서 미리 렌더링되고 클라이언트에서 하이드레이션된다.
• 파일의 맨 위에 'use client'; 를 명시해주어야 한다.

 

Hierarchy

• page.js : 해당 페이지(경로)에 대한 메인 컴포넌트
• error.js : React Error Boundary 이며, 자동으로 생성되며 래핑된다.
• loading.js : React Suspense 이며, 자동으로 생성되며 래핑된다.
• not-found.js : 현재 notFound 함수에 의해 트리거될 때만 렌더링된다. ( 일치하지 않는 경로를 포착할 수 있도록 지원하는 작업을 진행 중 )
• layout.js : root layout이 아닌 경우 Nesting Layout이다.
  • 특정 경로 세그먼트에 적용되며 해당 세그먼트가 활성화될 때 렌더링된다.
  • 기본적으로 파일 계층 구조의 레이아웃은 중첩되어 있으므로 하위 레이아웃이 하위 프로퍼티를 통해 하위 레이아웃을 감싸게 된다.
• template.js : layout wrapper와 비슷하다.
  • 컴포넌트의 새 인스턴스가 마운트되고, DOM 요소가 다시 생성되며, 상태가 보존되지 않고, 효과가 다시 동기화된다.
  • 꼭 필요한 경우가 아니라면 layout을 권장

 

style

css-in-js

• 런타임 자바스크립트가 필요하여 'use client'; 클라이언트 컴포넌트에서만 사용가능하다. ( 라이브러리에서 라이브러리 작성자가 동시 렌더링을 포함한 최신 버전의 React를 지원해줄 경우 사용 가능 )
• 렌더링 후 css가 적용되어 레이아웃시프트가 일어난다.
• 공식 문서의 warning : 런타임 자바스크립트가 필요한 CSS-in-JS 라이브러리는 현재 서버 컴포넌트에서 지원되지 않습니다. 서버 컴포넌트 및 스트리밍과 같은 최신 React 기능과 함께 CSS-in-JS를 사용하려면 라이브러리 작성자가 동시 렌더링을 포함한 최신 버전의 React를 지원해야 합니다.

 

css-in-css

• config에 명시해주고, 아래처럼 사용 가능

// Nav.tsx
import styles from './styles.module.scss'

export default function Nav() {
  return (
    <nav className={styles.nav}>
      <ul>
        <li>메뉴1</li>
        <li>메뉴2</li>
        <li>메뉴3</li>
        <li>메뉴4</li>
      </ul>
    </nav>
  )
}

// styles.module.scss
.nav {
  display: flex;
  padding: 25px 24px;
  width: 100vw;
  height: 80px;
  background-color: #ffffff;
  color: #0d0c22;

  & > ul {
    display: flex;
    justify-content: flex-start;
    gap: 32px;
  }
}