[13주차] Next.js의 SSR 실행 과정 & Hydration

📌 Next.js에서 SSR을 실행하는 과정과 hydration에 대해 설명해 주세요.

---

🤖 SSR 실행 과정

• 데이터 리퀘스트가 들어왔다면,
• 프론트 서버에서 필요한 데이터를 백엔드 서버에 요청
• 받은 데이터를 활용해 프론트 서버에서 HTML을 렌더링 → 프리렌더링
• 프론트 서버에 요청한 페이지에 필요한 HTML, CSS, JS 코드를 브라우저(프론트 클라이언트)로 전달
• 클라이언트는 우선 미리 서버에서 렌더링된 HTML, CSS 코드 내용을 화면에 보여주고, 필요한 JS 코드를 가져온다.
  → 사용자는 우선 인터랙션할 수 없는 HTML, CSS 코드로만 그려진 화면을 보게 되는 것!
• 리액트 hydration 이후 인터랙션이 가능한 페이지가 띄워짐.

⇒ SSR은 UI가 미리 완성된 화면에서 JS를 실행하고,
CSR은 UI가 미완성된 상황에서 JS에서 바로바로 UI를 동적으로 그려줌.

🧐 Hydration

• 서버에서 프리렌더링된 HTML과 번들링된 JS 파일을 클라이언트에게 보내면, 클라이언트에서는 HTML 코드와 React인 JS 코드를 서로 매칭시키는 과정이다.
• Next.js 서버에서 프리렌더링된 웹 페이지를 클라이언트에게 보내면
• 리액트가 번들링된 JS 코드들을 클라이언트에게 전송해준다.
• 이 JS 코드들이 이전에 보내진 HTML DOM 요소 위에서 한번 더 렌더링을 하면서 각자 자기 자리를 찾아 매칭이 되는 것! → 이게 바로 Hydrate다.