[Next.js] SSR(server side rendering)의 실행 과정과 hydration

🐝 SSR(server side rendering)

서버 사이드 렌더링은 사용자가 요청을 보낼 때마다 서버가 직접 렌더링을 마친 html 파일을 보내주는 방식입니다.

 

동작 과정은 다음과 같습니다.

1. 사용자가 웹 페이지에 접속하면 브라우저는 해당 url을 서버에게 요청합니다.
2. 서버는 받은 url을 기준으로 어떤 페이지를 렌더링할 지 결정합니다.
3. 서버에서 웹 페이지를 완성하고, 그 결과를 브라우저에게 응답으로 전달합니다.
4. 이후에는 클라이언트 사이드 렌더링(CSR)과 마찬가지로 브라우저는 받은 html 파일을 해석하여 DOM을 생성하고 hydration을 수행합니다.

SSR 실행 과정(이정환 강사님의 자료를 참고하였습니다)

여기에서 중간에 있는 hydration이란 무엇일까요?

 

---

🐝 Hydration

hydration(하이드레이션)의 사전적인 의미는 '수분 공급', '수화'입니다.

 

서버 사이드 렌더링 방식에서는 브라우저가 아닌 서버에서 페이지를 렌더링한다고 했습니다.

이때 페이지를 렌더링하는 것은 사람의 형체 = 브라우저의 뼈대만 만드는 것이기 때문에

생기를 불어넣고 타인과의 상호작용이 가능하게 하려면 = 웹 페이지가 동작하고 이벤트를 처리하도록 하려면 

수분을 공급 = 자바스크립트의 동적 이벤트를 연결해주는 과정이 필요합니다.

 

즉, 넥스트의 하이드레이션은 서버에서 렌더링된 정적인 html 페이지를

클라이언트가 리액트 컴포넌트로 변환하고, 이후에 발생하는 ui 업데이트를 리액트가 처리할 수 있게 하는 과정입니다.

 

---

서버 사이드 렌더링 외의 다른 렌더링 방식에 대한 내용은 이전 게시글을 참고해주세요.

[React] 웹 페이지 렌더링 방식(CSR, SSR, SSG)

[React] 웹 페이지 렌더링 방식(CSR, SSR, SSG)

 

---

읽어주셔서 감사합니다:)