Next.js에서 컴포넌트는 두 자리

app/page.js도 React 컴포넌트다. 지시어가 없으면 서버 컴포넌트다. 서버에서는 await로 데이터를 읽을 수 있다. useState, onClick은 없다.

클릭과 입력은 파일 첫 줄에 'use client'를 둔 클라이언트 컴포넌트로 뺀다. 페이지 전체에 붙이지 않는다. 버튼 파일만 브라우저 묶음으로 가면 된다.

import Counter from './counter'

export default async function Page() {
  const post = await getPost()

  return (
    <>
      <h1>{post.title}</h1>
      <Counter start={post.likes} />
    </>
  )
}

'use client'

import { useState } from 'react'

export default function Counter({ start }) {
  const [count, setCount] = useState(start)

  return (
    <button type="button" onClick={() => setCount(count + 1)}>
      {count}
    </button>
  )
}

서버에서 클라이언트로 넘기는 props는 직렬화되는 값이어야 한다. 숫자, 문자열, 평범한 객체와 배열은 된다. 함수는 넘기지 못한다.

서버 화면을 슬롯으로

클라이언트 컴포넌트가 서버 컴포넌트를 import하면 그 서버 코드까지 브라우저로 끌려간다. 서버에서 그린 결과는 children으로 받는다.

'use client'

export default function Panel({ children }) {
  return <section>{children}</section>
}

주소, loading.js, 서버에서 목록을 가져오는 방법은 Next.js · 컴포넌트·데이터로 이어진다.