<aside> 💡 Next.js 를 이용하는 경우 한 어플리케이션 안에서도 페이지 별로 각기 다른 렌더링 방식을 혼합해 성능 좋은 웹앱을 만들 수 있습니다. 또한 한 페이지 내에서도 두개 이상의 렌더링 방식을 이용해 하이브리드 방식으로 페이지를 만들 수 있습니다.

</aside>

• home : ISR(incremental static rendering)
• about: SSG(static side generation) - 잘 변경되지 않기 때문에
• profile: SSR/CSR을 적절하게 섞어서 하이브리드 형식으로 만듦
• contact: CSR(client side rendering)

Next.js for Hybrid Web App

하이브리드란?

• 혼합 특정 목적을 달성하기 위해 두개 이상(이중성)의 기능이나 요소를 결합.

하이브리드 웹앱이란?

→ 성능 좋은 웹앱을 만들기 위해 성능에 따라서 각기 다른 렌더링 방식(CSR, SSG, ISR, SSR)을 혼합해서 만들 수 있다.

Hydration for interation

hydration란?

• 수화시키다 “Stay Hydrated” 물(리액트)로 가득 채우다

Client가 Server에 페이지를 요청하면 넥스트.js는 사용자가 빠르게 페이지를 볼 수 있는 의미 있는 정적인 HTML페이지를 먼저보여 줍니다. 따라서 사용자는 페이지를 볼 수는 있지만 아직 자바스크립트 파일을 다운로드 받지 않았기 때문에 클릭을 해도 아무런 반응을 확인할 수 없습니다.