🐝 SSR(server side rendering)
서버 사이드 렌더링은 사용자가 요청을 보낼 때마다 서버가 직접 렌더링을 마친 html 파일을 보내주는 방식입니다.
동작 과정은 다음과 같습니다.
- 사용자가 웹 페이지에 접속하면 브라우저는 해당 url을 서버에게 요청합니다.
- 서버는 받은 url을 기준으로 어떤 페이지를 렌더링할 지 결정합니다.
- 서버에서 웹 페이지를 완성하고, 그 결과를 브라우저에게 응답으로 전달합니다.
- 이후에는 클라이언트 사이드 렌더링(CSR)과 마찬가지로 브라우저는 받은 html 파일을 해석하여 DOM을 생성하고 hydration을 수행합니다.
여기에서 중간에 있는 hydration이란 무엇일까요?
🐝 Hydration
hydration(하이드레이션)의 사전적인 의미는 '수분 공급', '수화'입니다.
서버 사이드 렌더링 방식에서는 브라우저가 아닌 서버에서 페이지를 렌더링한다고 했습니다.
이때 페이지를 렌더링하는 것은 사람의 형체 = 브라우저의 뼈대만 만드는 것이기 때문에
생기를 불어넣고 타인과의 상호작용이 가능하게 하려면 = 웹 페이지가 동작하고 이벤트를 처리하도록 하려면
수분을 공급 = 자바스크립트의 동적 이벤트를 연결해주는 과정이 필요합니다.
즉, 넥스트의 하이드레이션은 서버에서 렌더링된 정적인 html 페이지를
클라이언트가 리액트 컴포넌트로 변환하고, 이후에 발생하는 ui 업데이트를 리액트가 처리할 수 있게 하는 과정입니다.
서버 사이드 렌더링 외의 다른 렌더링 방식에 대한 내용은 이전 게시글을 참고해주세요.
[React] 웹 페이지 렌더링 방식(CSR, SSR, SSG)
[React] 웹 페이지 렌더링 방식(CSR, SSR, SSG)
🪴 웹 렌더링이란웹 렌더링이란 실시간으로 웹 페이지가 그려지는 과정으로, 웹 페이지를 사용자에게 보여주기 위한 과정을 의미합니다.- 요즘IT대부분의 웹 브라우저를 분해해보면, 그 안에는
dev-district.tistory.com
읽어주셔서 감사합니다:)
