SSR에서는 hydration이라는 개념이 존재합니다.
서버 사이드에서 정적인 페이지(HTML)을 먼저 렌더링하고,
JS코드를 로드후에 HTML에 이벤트 핸들러들을 붙여 동적인 페이지를 만드는 과정을 hydration 이라고 합니다.
hydration이라는 단어는 ‘수분공급’ 이라는 뜻을 가지고 있습니다. 이 뜻대로 무미 건조한 HTML에
JS라는 인터렉션 즉 수분을 공급해주는 개념이라고 생각하면 될거 같습니다.
Next.js에서는 클라이언트 측으로 웹을 전송하기전에 서버 사이드 에서 미리 웹을 pre-rendering 합니다.
pre-rendering으로 생선된 HTML파일을 클라이언트로 전송하게 되는것 입니다.
클라이언트는 먼저 단순한 HTML파일을 받게되며, JS 코드들이 없는상태로 껍데기만 받게되는것 입니다.
Next.js는 이러한 HTML 파일을 먼저 전송한 후에, JS 코드를 클라이언트로 전송하게 됩니다.
Next.js로 만든 페이지에서 개발자도구 network 탭을 확인 해보면 먼저 document Type(HTML)을 받게되며
그후 순차적으로 JS 파일들이 다룬로드 되는것을 볼수 있습니다.