Next.js - server/client component

Next.js에서는 server component, client component 2가지 종류의 component가 있다!

리액트에서 하던 방식대로 component를 그냥 만들면 server component임.

 

component 만드는법

• function 작명() { }
• return ( html )
• < 작명 /> 으로 사용

export default function Cart() {
    return (
      <div>
        <h4 className="title">Cart</h4>
        <CartItem/>
      </div>
    )
  } 


function CartItem(){
    return(
      <div className="cart-item">
          <p>상품명</p>
          <p>$40</p>
          <p>1개</p>
      </div>
    )
}

여기서는 CartItem이 server component 임.

 

server component?

• html 상에 자바스크립트 기능 넣기 불가능(ex. onClick)
• useState, useEffect 사용 불가능
• 로딩 속도가 빠름

---

원래 알던 방식이 서버컴포넌트인데,

파일 맨위에 'use client' 를 작성하면 client component가 된다.

'use client'

export default function Cart() {
    return (
      <div>
        <h4 className="title">Cart</h4>
        <CartItem/>
      </div>
    )
  } 


function CartItem(){
    return(
      <div className="cart-item">
          <p>상품명</p>
          <p>$40</p>
          <p>1개</p>
      </div>
    )
}

client component?

• 자바스크립트 해석때문에 로딩속도 느림
• html 분석하는 작업때문에 로딩속도 느림( hydration )

 

👉 큰 페이지는 sever component, JS기능 필요한 곳만 client component를 사용하자.