[React] Next.js, Hydrate

 : Next.js는 React 기반의 웹 애플리케이션을 빌드하기 위한 JavaScript 프레임워크입니다. Next.js는 React를 사용하여 정적 및 동적 웹 페이지를 빌드하는 데 도움을 주며, 많은 기능과 성능 최적화를 제공합니다.

 

기존의 전통적인 SSR 방식은 웹페이지 이동 시에 페이지를 요청할 때마다 서버로부터 새롭게 생성된 HTML 파일을 받아와 화면에 렌더링하였습니다. 이러한 방식은 서버 자원을 많이 소모하고 불필요한 트래픽을 유발했습니다.

Next.js는 초기 페이지 로딩에 대해서는 정적 사이트 생성(SSG), SSR 방식으로 동작시킬 수가 있고, 이후의 요청에 대해서는 기본적으로 클라이언트사이드 렌더링(CSR) 방식으로 동작하기 때문에 SSR 방식의 장점인 SEO에 유리하면서도 CSR의 이점을 활용할 수 있습니다.

React는 CSR(Client-side Rendering)로, 처음에 브라우저가 빈 HTML을 파일을 받아 아무것도 보여주지 않다가, 사용자의 기기에서 렌더링이 진행되어 한 번에 화면을 보여줍니다

 

 

• 서버 사이드 렌더링(SSR) : Next.js는 기본적으로 서버 사이드 렌더링을 지원합니다. 이것은 페이지를 서버에서 렌더링하고 클라이언트에게 결과를 제공함으로써 초기 로딩 속도를 향상시킵니다.
  
  
• 정적 생성(Static Generation) : 정적 생성을 사용하여 사전에 페이지를 렌더링하고 CDN에 저장함으로써 성능을 극대화할 수 있습니다. 이는 자주 변경되지 않는 페이지에 적합합니다.
  
  
• 동적 라우팅(Dynamic Routing) : Next.js는 동적 라우팅을 통해 쉽게 동적 페이지를 만들 수 있습니다. 파일 시스템을 기반으로한 경로 매핑을 통해 유연한 동적 라우팅이 가능합니다.
  
  
• API Routes : 서버리스 함수를 구현할 수 있는 API Routes를 제공합니다. 이를 통해 서버에서 데이터를 가져와 페이지에 제공하거나 데이터를 업데이트할 수 있습니다.
  
  
• Hot Module Replacement (HMR) : 개발 중에 모듈이 수정될 때 페이지를 다시 로드하지 않고도 모듈을 업데이트할 수 있는 HMR을 지원합니다.
  
  
• TypeScript 지원: Next.js는 TypeScript를 공식적으로 지원하며, TypeScript를 사용하여 더 강력한 정적 타입 검사를 수행할 수 있습니다.
  
  
• React, Webpack, Babel 및 기타 많은 도구들이 미리 구성되어 있어, 설정에 대한 걱정 없이 빠르게 프로젝트를 시작할 수 있습니다.
  
  
• Next.js는 React 개발자들이 좋아하는 React의 선언적 구문과 함께 서버 사이드 렌더링, 정적 생성, 동적 라우팅 등의 기능을 제공하여 웹 애플리케이션의 성능과 사용자 경험을 향상시키는 데 도움이 되는 강력한 프레임워크입니다.

 

 

---

 

Pre-rendering

: 각 페이지의 HTML을 미리 생성합니다.

 

Next.js에서 미리 렌더링 하는 방식은 두 가지로 나뉘며, HTML이 생성되는 시점이 다르다. 

하나는 빌드 타임에 HTML에 생성되어 매 요청마다 이를 재사용하게 해주는 SSG(Static-site Generation)이고, 

다른 하나는 매 요청마다 HTML을 생성하는 SSR(Server-side Rendering)이다.

Next.js는 기본적으로 SSG를 이용합니다.

 

 

 

Hydration

: Hydrate는 Server Side 단에서 렌더링 된 정적 페이지와 번들링된 JS파일을 클라이언트에게 보낸 뒤, 클라이언트 단에서 HTML 코드와 React인 JS코드를 서로 매칭시키는 과정을 말한다.

 

Next.js Server에서는 Pre-Rendering된 웹 페이지를 클라이언트에게 보내고 나서, 바로 리액트가 번들링 된 자바스크립트 코드들을 클라이언트에게 전송한다. 

 

이 자바스크립트 코드들이 이전에 보내진 HTML DOM 요소 위에서 한번 더 렌더링을 하면서, 각자 자기 자리를 찾아가며 매칭이 된다.

이 과정을 Hydrate라고 부른다.

 

 

Hydration의 작동 원리:

1. 서버에서 HTML 렌더링:
   • SSR 또는 SSG에서는 서버에서 미리 HTML 페이지를 생성한 후 이를 클라이언트에 전달합니다. 이 HTML은 실제 페이지 구조를 포함하고 있지만, JavaScript 로직은 포함되어 있지 않습니다.
2. 클라이언트에서 JavaScript 로드:
   • 클라이언트(브라우저)에서는 React, Vue, Angular와 같은 JavaScript 프레임워크가 페이지의 동적 기능을 활성화하기 위해 JavaScript를 로드합니다.
3. Hydration:
   • 클라이언트에서 해당 HTML 페이지를 JavaScript가 읽고, DOM을 재활성화하여 이벤트 핸들러나 상태 관리 등을 추가합니다.
   • 즉, 서버에서 전달된 정적 HTML을 클라이언트에서 동적인 애플리케이션으로 변환하는 과정이 바로 Hydration입니다.

 

 

단점 

• 너무 느린 핫 리로드 
• 개발 모드에서는 느린 정적 페이지
• 서버 코드와 클라이언트 코드가 혼재

 

---

프로젝트 생성

1. Next.js  + typescript 프로젝트 생성

yarn create next-app --typescript ${프로젝트이름}

 

 

2. 프로젝트 실행

yarn dev

 

 

 

 

---

https://velog.io/@hyeewooon/nextjs

https://helloinyong.tistory.com/315