[Next.js] React 대신 Next.js 사용하는 이유?!?

React 의 한계

리액트는 SPA(Single Page Application)이고, CSR(Client Side Rendering)을 앱의 첫 로딩시간이 길고, SEO 가 좋지 않다는 단점이 있다.

 

그래서 웹 사이트를 요청할 때 앱에 필요한 모든 컴포넌트를 다운로드하고, 빈 html을 가져와 script를 로딩한다. 이로 인해 앱의 첫 로드 시간이 오래 걸려 사용자 경험을 해치게 된다.

 

Next.js 란?

Next.js 는 React의 프레임워크로 React 애플리케이션을 더 쉽게 만들고 배포할 수 있는 다양한 기능을 제공한다.

 

예를 들어 리액트는 라우팅하기 위해 react router 나 tanstack router 등 여러 도구 중 하나를 선택할 수 있지만, 넥스트는 내장된 기술을 사용한다.

 

Next.js 장점

1. 이미지 최적화

내장된 Image 컴포넌트를 사용하여 lazy-loading을 통해 필요한 순간 이미지를 가져와 최적화를 해준다.

 

2. 파일 기반 라우팅

페이지를 만들면 자동으로 파일 시스템 구조와 동일한 페이지를 라우팅 된다.

 

3. Client side navigation

내장된 Link 컴포넌트를 사용해 페이지를 이동할 때, 필요한 데이터만 가져와 속도도 빠르고 자연스럽게 이동이 된다.

 

4. 서버 사이드 렌더링(SSR)

서버 측에서 렌더링을 수행하여 초기 페이지 로드 시 콘텐츠가 미리 렌더링된 상태로 제공되며 SEO에 매우 유리하다.

 

5. 정적 사이트 생성(SSG)

빌드 타임에 페이지를 미리 렌더링하여 정적 파일로 생성하여 정적 사이트를 빠르게 제공한다.

 

Next.js에서 SSR을 실행하는 과정과 hydration

1. 사용자가 브라우저에서 특정 페이지에 접근하면, 요청이 Next.js 서버로 전달

2. Next.js 서버는 요청받은 페이지를 서버 측에서 렌더링 (리액트 컴포넌트를 HTML로 변환하는 과정)

3. 서버 측에서 렌더링된 HTML과 페이지를 초기화하는 데 필요한 데이터를 함께 클라이언트로 전송

4. 사용자는 HTML, CSS 코드로 그려진 화면을 보게 됨

5. hydration 이후 인터랙션 가능

 

hydration 란?

서버에서 미리 렌더링된 HTML을 클라이언트 측에서 리액트 애플리케이션으로 변환하여 상호작용할 수 있도록 만드는 과정

 

Server-Side에서 렌더링 된 정적 페이지(HTML)와 번들링 된 JS 파일을 클라이언트에게 보내면, Client-Side에서 HTML 코드와 JS(React) 코드를 서로 매칭시키는 과정