Next.js 의 하이브리드

Next.js 는 하이브리드 웹 앱을 제공 합니다.

하이브리드(Hybrid)?

혼합 이라는 뜻으로, 특정 목적을 달성하기 위해 두 개 이상의 기능이나 요소를 결합한 것

Next.js 의 하이브리드는

성능 좋은 웹앱을 만들기 위해 하나의 렌더링 방식이 아니라 필요에 따라서 여러가지
렌더링 방식을 혼합해서 만들 수 있다는 뜻 입니다.

이것은 Next.js 를 사용하는 궁극적인 이유이기도 합니다.

per-page-basis

예를 들어 홈페이지는 ISR 로 만들고, 유저 개인 정보 페이지는 잘 변경되지 않기 때문에 SSG 로 만듭니다. 사용자 프로필 페이지는 SSR 와 CSR 을 사용하여 만듭니다.

이처럼 하나의 애플리케이션 안에서 페이지의 특징 별로 가장 최적화된 렌더링 방식으로 만들 수 있습니다.
그리고 하나의 페이지 안 ➡️ 부분 별로 렌더링 방식을 혼합하여 하이브리드 형태로 만들 수 있습니다.

하이브리드를 가능하게 하기 위해 Next.js 에서 hydration 이라는 특징이 있습니다.

hydration

이해하기 쉽게 단어의 정의부터 알아보고자 찾아보는 중 가장 유사하게 접근한 말을 참고했습니다.

Hydrate는 '수화(水化) 시키다'는 뜻이며, 수화(水化)는 어떤 물질이 물과 결합하여 수화물(물을 포함하는 화합물)이 되는 현상이다. 서버의 데이터가 클라이언트의 DOM과 결합하는 과정을 빗대어 hydrate라는 단어로 정의된 것 같다. 출처 : https://www.howdy-mj.me/next/hydrate

hydration 과정

클라이언트가 서버에 페이지를 요청하면 Next.js 는 필요한 요소들을 받아와서 페이지를 생성 합니다.

여기에서 만들어진 페이지는 서버에서 사용자에게 의미있는 데이터를 먼저 보여주기 위해서 정적인 HTML 페이지를 만듭니다. 그리고 이 과정을 Pre-Rendering 이라고도 합니다.

이렇게 되면 클라이언트는 정적인 HTML 페이지를 화면에 빠르게 표기할 수 있습니다. 그러나 현재 페이지에는 아직 자바스크립트 코드가 포함되지 않았기 때문에 사용자가 상호작용을 해도 아무런 반응이 일어나지 않습니다.

그 후

HTML 페이지를 먼저 보내준 다음에 그 뒤에 페이지에 필요한 React 라이브러리와 소스 코드들을 보내줍니다. React 와 자바스크립트 코드가 클라이언트 측에서 다운로드 받으면 정적인 HTML 페이지를 받아온 코드(React)들로 채웁니다. 이 부분이 Hydration 입니다.

이전까지 정적인 HTML 페이지였다면, 그 위에 실제 컴포넌트들을 페이지에 렌더링 하기 시작 합니다.

요악하면

사용자에게 페이지를 빠르게 보여주기 위해 서버에서 정적인 HTML 페이지를 먼저 보냅니다.
그 후 사용자와 상호작용이 필요한 React 및 자바스크립트 코드를 보내줍니다.
클라이언트에서 다운로드 받게 되면 hydraion 을 하게되는데 React 로 페이지를 위에 채웁니다. ➡️ 정적인 HTML 대신에 React 컴포넌트가 사용 됩니다.