[Next] Next.js 소개 & 렌더링 방식의 차이

☑️ Next.js란?

Next.js는 React 기반의 웹 개발 프레임워크로, 특히 서버 사이드 렌더링과 정적 사이트 생성을 통해 고성능 웹사이트 개발을 지원하는 기술이다. Next.js는 Vercel에서 개발했으며, 다양한 기능을 제공해 개발자가 효율적으로 웹 애플리케이션을 구축할 수 있게 돕는다.

---

 

🤔 그렇다면 React 는 라이브러리인데, 프레임워크와 무슨 차이가 있을까?

☑️ 프레임워크와 라이브러리의 차이

• 프레임워크 예시: Next.js, Remix
  • 프레임워크는 기능 구현의 흐름을 주도한다. 즉, 프레임워크가 제공하는 기능과 규칙에 따라 개발을 진행해야 하므로 제한적이지만, 기본적으로 제공되는 다양한 기능을 이용해 복잡한 웹 애플리케이션을 쉽게 구축할 수 있다.
• 라이브러리 예시: React, JQuery
  • 라이브러리는 개발자가 원하는 방식으로 기능을 추가할 수 있는 자유도를 제공한다. 하지만, 기본 기능 외에는 제공되는 것이 없기 때문에 필요한 기능을 직접 구현하거나 별도의 도구를 추가해야 한다.

💡따라서, 복잡하고 다양한 기능을 갖는 오늘날의 웹 서비스를 구축할 때 프레임워크에서 기본적으로 제공해주는 다양한 기능들로 구현하면 많은 부분의 문제를 간단하게 해결할 수 있을 것이다

 

---

 

☑️ 렌더링 방식: 클라이언트 사이드 렌더링 vs. 사전 렌더링

🤔 Next.js 의 렌더링을 살펴보기전에 React 앱의 클라이언트 사이드 렌더링부터 복습해보자!

 

✔️ 클라이언트 사이드 렌더링 (CSR, Client Side Rendering)

기본적으로 React 앱은 CSR 방식을 사용한다. 이 방식에서는 모든 렌더링 작업이 브라우저에서 이루어지며, 서버에서 제공되는 최소한의 HTML에 자바스크립트 코드가 추가되어 전체 애플리케이션이 작동하게 된다.

클라이언트 사이드 렌더링 (CSR, Client Side Rendering) 과정 이미지

➕ JS 실행(렌더링) : 자바스크립트 코드(React 컴포넌트)를 HTML로 변환하는 과정

 

⚙️ 렌더링 과정

1. 브라우저가 서버에 초기 접속 요청을 보낸다.
2. 서버가 빈 화면을 포함한 HTML 파일을 전달한다
3. 브라우저는 빈 화면을 렌더링한다.
4. 브라우저가 서버에게 자바스크립트 번들링 파일을 요청하고 받는다.
5. 브라우저가 받은 자바스크립트를 실행하여 화면을 렌더링한다.

👍장점

• JS bundle 하는 과정에서 웹 사이트에 필요한 모든 컴포넌트의 코드가 존재하여 초기 접속 이후에 페이지 이동은 매우 빠르다.
• 전체 애플리케이션이 브라우저에 있기 때문에 추가적인 서버 요청 없이 빠르게 이동 가능하다.

👎단점

• 초기 접속이 느릴 수 있다. 특히 FCP(First Contentful Paint)까지의 시간이 길어질 수 있다.

➕ FCP(First Contentful Paint) : "요청 시작" 시점으로부터 컨텐츠가 화면에 처음 나타나는데 걸리는 시간

 

 

✔️ 사전 렌더링 (Pre Rendering)

Next.js는 초기 화면을 서버에서 미리 렌더링하여 브라우저에 전달하는 사전 렌더링 방식을 제공한다. 서버에서 HTML을 미리 만들어 전송하므로 CSR의 초기 로딩 속도 문제를 해결할 수 있다.

사전 렌더링 (Pre Rendering) 과정 이미지

➕ JS 실행(렌더링) : 자바스크립트 코드(React 컴포넌트)를 HTML로 변환하는 과정

➕ 수화(Hydration) : 서버가 미리 렌더링한 HTML을 브라우저에 보내고 나면, 브라우저는 추가로 서버에서 자바스크립트 번들 파일을 받아 이를 실행해 현재 HTML과 연결하는 과정

 

⚙️ 렌더링 과정

1. 사용자가 브라우저를 통해 초기 접속 요청을 보낸다.
2. 서버가 현재 페이지에 필요한 React 컴포넌트를 HTML로 미리 렌더링하여 브라우저로 전달한다.
3. 브라우저는 미리 렌더링된 HTML을 표시한다. 이때, 자바스크립트 코드가 없어서 인터렉션(상호작용)이 불가능하다.
4. 브라우저가 자바스크립트 번들을 받아 수화(Hydration) 과정을 통해 상호작용 가능하게 만든다.
5. 이후의 페이지 이동은 CSR 방식으로 처리된다.

👍 장점

• 초기 접속 시 빠른 FCP 달성 가능하다.
• 초기 렌더링 이후, 페이지 이동은 CSR 방식으로 처리되어 TTI(Time to Interactive)와 전반적인 사용자 경험이 향상된다.

 

🎓 정리

Next.js는 초기 화면 로딩을 빠르게 하고, 이후의 사용자 경험을 최적화하기 위해 사전 렌더링과 클라이언트 사이드 렌더링 방식을 혼합해 사용하는 프레임워크다. 이를 통해 React 기반 웹 애플리케이션의 초기 접속 속도와 인터랙티브 성능을 동시에 확보할 수 있다.