client/server component

---

server component <SSR>

export default function Home() {
  return (
    <div>
      <h1>test</h1>
    </div>
  );
}

평소처럼 사용하는 컴포넌트들은 server component이다.

 

장점: 페이지 로드가 빠르다.

단점: 리액트문법처럼 html안에 { }를 사용해 자바스크립트 문법을 사용하지 못한다.

=> useState, useEffect, onClick 불가능

---

client component <CSR>

'use client'

export default function Home() {
  return (
    <div>
      <h1>test</h1>
    </div>
  );
}

차이가 없어 보이지만 상단에 'use client'를 붙이면 client component가 된다.

 

장점: 리액트 문법과 동일하게 html에 자바스크립트를 넣을 수 있다.

단점: 페이지 로드가 느리다. <hydration 과정이 필요함>

=> 컴퓨터가 html을 분석하는 과정

---

next.js 답게 사용하려면?

 

페이지 = server component를 사용하여 페이지로드를 빠르게 하고

기능 = client component로 따로 빼서 구현을 하자!

 

=> 그냥 모두 client component로 구현을 하면 리액트랑 다를 게 없음. -CSR-

---

선택해서 CSR/SSR을 적용할 수 있다고 한 게 겨우 저 한 줄로 처리할 수 있다는 게 정. 말 신기하다.

벌써 next.js의 아름다움을 느낀 것 같다.

리액트랑 여태 큰 차이가 없다고 생각했는데 이제 시작인 것 같네! 하하ㅏㅏ하하하😆