렌더링

• 자바스크립트를 가져와서 브라우저가 이해할 수 있는 HTML로 변환하는 작업

Next.js에서 rendering

• Next.js가 우리의 react component를 가져와 브라우저가 이해할 수 있는 html로 변환

react에서의 rendering

• client side rendering = 브라우저가 rendering 작업을 함
• 단점

1. 깜빡임 현상
   • 처음 렌더링될 때 body 부분이 비어있음 -> 처음엔 빈 화면
   • 브라우저가 모든 js 파일을 다운로드하고 실행한 후에 화면이 보여짐
   • 따라서 깜빡임 현상이 발생함
   • 브라우저가 모든 js 파일을 다운로드하고 실행시키는데 걸리는 시간이 있기 때문에
2. SEO에 별로

SSR

• 브라우저가 js 로드될 때까지 기다릴 필요 없이 이미 내용을 표시할 HTML이 있음
• server : backend에서 application을 render해 줌

'use client'가 붙었다고 csr로 동작하는 것은 아님
next는 기본적으로 ssr로 동작함
'use client'가 붙어도 server에서 동작
Nextjs에서 모든 컴포넌트와 페이지들은 먼저 서버에서 렌더됨
('use client' 사용 여부와 상관없음)

hydration

• 단순 HTML을 React application으로 초기화하는 작업
• useState를 통해 button으로 +1을 할 경우
  - 먼저 0이 쓰인 것 외에 아무것도 없는 버튼을 만들고
  • React를 initialize하여 onClick을 붙여 기능 가능하도록 수행
• dehydration 되어있는 HTML(즉, 아무런 기능 없는 HTML)에 react라는 hydration으로 생기 있는, 동작하는 HTML로 만들어 줌
  - 말린 딸기를 생딸기로 만들어주는 느낌
  https://nomadcoders.co/nextjs-for-beginners/lectures/4696

하이드레이션(Hydration)이란?

서버사이드 렌더링(SSR)을 통해 만들어 진 인터랙티브 하지 않는 HTML을 클라이언트 측 자바스크립트를 사용하여 인터랙티브한 리액트 컴포넌트로 변환하는 과정을 말한다.
(서버 환경에서 이미 렌더링된 HTML에 React를 붙이는 것)