프리렌더링
렌더링은 HTML, CSS, JS로 작성된 문서를 파싱하여 브라우저에 사용자가 눈으로 볼 수 있도록 시각적으로 출력하는 것을 의미한다.
프리렌더링이란 웹 페이지를 로딩하기 이전에 이루어지는 렌더링을 의미한다. 프리렌더링을 하게 되면 초기 로딩이 빨라지고 검색 엔진 최적화가 가능해진다.
클라이언트 사이드 렌더링 (CSR)
서버에서 받은 데이터를 클라이언트인 브라우저가 화면에 그린다. HTML 파싱부터 JS 읽기까지 브라우저에서 하기때문에 처음에 화면을 띄우는 데 시간이 좀 걸린다.
프리렌더링은 HTML 파싱 이전에 진행되는 렌더링을 의미한다.
프리렌더링 방식
정적 생성 (Static Generation)
빌드 시점에 렌더링을 한다.
즉, 빌드 타임에 모든 필요한 HTML을 미리 생성한다. 각 페이지는 빌드 타임에 콘텐츠를 불러와 HTML을 생성하며, 이 HTML은 사용자가 페이지를 요청할 때마다 재사용된다.
서버 사이드 렌더링 (SSR)
사용자가 페이지를 요청할 때마다 HTML을 생성한다.
Hydration
JavaScript가 이미 렌더링된 HTML 마크업을 가져오는(혹은 재사용하는) 과정으로, JavaScript는 HTML 요소에 이벤트 리스너를 추가하거나, DOM 조작을 통해 동적인 기능을 추가하는 등의 작업을 수행한다.
Next.js, Gatsby, Nuxt.js 등의 프레임워크에서는 이러한 하이드레이션 과정을 자동으로 수행해준다.
참고자료
Frontend🍓