server component와 client component

NEXT.JS의 Component

next.js의 일반적으로 작성하는 것들은 server component이다.

html안에 javascript를 넣을 수 없다. hook도 사용 불가능. onClick 이벤트 같은 것도 노노

 자바스크립트가 없으니 페이지를 로드할 때 속도가 빠르다.

 

자바스크립트를 넣고 싶으면 

컴포넌트 맨 위에 'use client' 코드를 넣으면 됨

이 코드 아래 모든 컴포넌트는 client component가 된다.

하지만 자바스크립트를 넣으므로써 용량이 커지고 페이지 로딩속도가 느려진다는 단점이 발생한다.

client component를 로드하려면 hydration이라는 과정을 거쳐야 하는데 그것 때문에 속도가 더 느려진다.

hydration??

=> SSR(server-side Rendering)에서 렌더링 된 정적 페이지와 번들링된 JavaScript를 서로 매칭 시키는 과정

 

근데! use client를 작성하지 않고도 통과되는 이건 모임...

App router를 사용하는 곳에서는 use client를 안 쓰면 error가 나는데

여기서는 error없이 작동이 잘 됨 이유가.. 뭐지?

이유를 아시나요??? 아시는 분....ㅜㅜㅜㅜ

찾아보고 다시 글을 수정해야겠다.

 

 

 

 

 

Next.js의 Hydrate란?

 

 

나중에 보려고 작성

CSR(Client Side Rendering) 테스트 
개발자 도구 -> Network -> Slow 3G로 바꾸시고, Disable cache를 클릭,

새로고침 하면 테스트해 볼 수 있다.
자바스크립트 비활성화하기
보안 및 개인정보 보호-사이트 및 방패 설정-자바스크립트-자바스크립트 비활성화

 

=> react로 작성할 때면 빈 div태그만 있기 때문에 하얀 화면만 먼저 나오고 나중에 받아온 데이터를 보여줌

Next.js로 작성하면 받아온 데이터를 나중에 보여주긴 하지만 내가 작성한 html코드들은 보임(pre Rendering)