하이브리드(Hybrid) 렌더링📚
특정 목적을 달성하기 위해 두개 이상의 기능이나 요소를 결합, Next.js 는 Hybrid Web App 이라고도 불리우는데, 성능 좋은 강력한 Web App 을 만들기 위해 두개 이상의 렌더링 방법을 사용하는것을 의미한다. 👉 서버사이드에서 렌더링 된 정적 페이지와 번들링 된 Javascript를 서로 매칭 시키는 과정
하이브리드 사용예🔎
홈페이지는 ISR, 안에 소개글 페이지는 변경이 거의 없기때문에 SSG, 사용자 프로필 페이지는 CSR,SSR을 하이브리드 해서 만들 수 있다.
렌더링 방식 비교 (참고)
| 렌더링 방식 | 설명 | 데이터 변경 주기 | 빌드타임 처리 | 특징 |
|---|---|---|---|---|
| SSG | fetch한 데이터는 영원히 변치 않는다. 계속 컴포넌트를 갱신할 필요가 없습니다. | 변하지 않음 | 빌드타임에만 컴포넌트 생성 | Next.js는 기본적으로 SSG로 동작. 이후는 static 컴포넌트를 제공. |
| ISR | fetch한 데이터는 가끔 변한다. 일정 주기마다 가끔씩만 컴포넌트를 갱신합니다. | 일정 주기마다 변함 | 빌드타임에 컴포넌트를 초기 생성 후 주기적으로 갱신 | 초기 생성 후 주기적으로 변화를 적용하여 컴포넌트를 제공. |
| SSR | fetch한 데이터는 실시간으로 계속 변경된다. 컴포넌트 요청이 있을 때마다 데이터를 갱신해서 최신 데이터만 제공해야 합니다. | 요청 시마다 실시간으로 변함 | 빌드타임에 초기 생성 후 요청 시마다 갱신 | 요청 시마다 가장 최신의 데이터를 제공. |
| CSR | fetch한 데이터는 실시간으로 계속 변경된다. 컴포넌트 요청이 있을 때마다 데이터를 갱신해서 최신 데이터만 제공해야 합니다. | 요청 시마다 실시간으로 변함 | 빌드타임에 초기 생성 없음 | Javascript로 이루어진 리액트 파일을 다운로드 받은 후 화면이 그려짐. |
-
이처럼 한 애플리케이션에서도 페이지 특성에 따라 적절한 렌더링 방식을 체택하여 만들 수 있고, 심지어 하나의 페이지 내에서도 하이브리드가 가능하다.
-
이방식의 장점은 HTML을 생성해 내려주면 SEO에 유리하고, 서버에 빠르게 HTML 응답해준다.
-
CSR로 처리되는 컴포넌트에 대한 JS 다운만 동작하면 되기 때문에 사용자는 좀 더 빠른 애플리케이션 이용이 가능해진다.
React 동작 원리 VS Next.js 동작 원리💡
React는 CSP을 하기위해 뼈대 되는 HTML 파일안에 id="root"인 div 태그를 남겨두고, 그 안에 javascript로 모든 것을 처리한다.
Next.js는 SSR을 하기 위해서 미리 HTMl 구성을 pre-rendering한 후 생성된 HTML 파일을 클라이언트로 전송한다. 이때 클라이언트가 받은 HTML 파일은 EventListener등과 같은 각종 Javascript 코드가 적용되지 않은 상태이다.
이문제를 해결하기위해, Hydration을 적용하는데 Next.js 서버가 pre-rendering된 HTML 파일을 클라이언트에 전송하자 마자, 번들링 된 Javscipt 코드들을 곧바로 클라이언트에 전송하고, 이번들링된 javascript 코드들이 HTML DOM 위에 한번 더 렌더링 되어 각 위치에 매칭된다.
이러한 과정을 Hydration이라 한다.
참조 사이트🙇♀️
Hydration을 알아보자
[Next.js] CSR, SSR, ISR, SSG, 하이브리드(Hybrid) 렌더링, 하이드레이션(Hydration)
