Next.js 정의, 등장 배경 및 특징 (프리렌더링, SSR)

프레임워크 Next.js에 대해 한번 정리해 볼 겸 글을 작성하게 되었다. Next.js란 무엇이며 주요 특징과 라우팅 방식에 따른 특징 등을 적어볼 예정이다. 해당 글은 이후 새롭게 학습한 개념 등을 추가로 계속 업데이트할 예정이다.

 

React의 프레임워크 Next.js 

Next.js는 리액트의 프레임워크이다. 리액트는 자바스크립트 UI 라이브러리로 주로 싱글 페이지 애플리케이션(SPA)을 만들 때 사용한다. 리액트는 자체만으로 많은 장점을 가진 라이브러리지만 라이브러리이기 때문에 제공하는 기본 기능이 적을 수밖에 없다. 리액트의 주요 특징은 기존에 정리해 둔 포스팅에서 확인할 수 있다.

 

2023.08.04 - [Programming/React] - React를 사용하는 이유

React를 사용하는 이유

 

즉, 특정 기능 구현을 위해 개발자가 직접 구현하거나 다른 라이브러리와 함께 사용을 해야 하는데, 이는 자유도가 높다는 장점이 있지만 기능 구현에 노력을 들여야 하고 온전한 애플리케이션을 만들기 위해 환경 구성 등에 시간을 쏟아야 한다. Next.js는 리액트기반 프레임워크로 리액트 라이브러리만으로 해결하기 어려운 점들을 제공해 주며 애플리케이션을 만들기 위해 필요한 환경 및 도구를 제공해 준다.

 

Next.js의 특징

(1) 프리렌더링(pre-rendering)과 Hydration

create-react-app을 사용하여 리액트만으로 SPA를 만들었을 때 CSR이 일어난다. CSR은 렌더링 하는 주체가 '클라이언트'로, 서버에서 클라이언트로 HTML, React 코드, JS 코드를 보내주면 클라이언트에서 최종 HTML을 생성해 브라우저에 보이게 된다. 이러한 리액트의 CSR 방식은 다음과 같은 장, 단점이 있다.

 

• 장점
  • 한 번에 받아와서 보이므로 TTV(Time To View)와 TTI(Time To Interaction)이 동시에 일어난다.
• 단점
  • FCP(First Contentful Paint)가 오래 걸린다.
  • 처음에 body에 빈 HTML이 전달되므로 SEO가 낮다.
  • 클라이언트에서 작업하므로 보안에 취약하다.

 

서론이 길었는데, 리액트의 CSR 문제를 해결하기 위해 Next.js는 프리렌더링 방식을 사용한다. 프리렌더링이란 단어 그대로 사전에 미리 만들어둔 HTML을 응답하는 렌더링 방식이다. 기본적으로 Next.js는 프리렌더링 방식을 모든 페이지에 적용한다.

 

즉, 현재 페이지의 생성된 HTML은 최소한의 JS코드와 연결되어 있고, 브라우저에 의해 페이지가 로드되면 리액트 코드, 자바스크립트 코드가 실행되어 최종 브라우저 렌더링이 일어나게 되는데 이 과정을💧Hydration이라고 한다. 

 

 

(2) 서버 사이드 렌더링 

프리렌더링 방식을 통해 Next.js에서는 다양한 렌더링 방식을 적용할 수 있다. 대표적으로 SSR과 SSG 방식이 있다.

 

✔️ SSR (Server-side Rendering)

 SPA에서는 자바스크립트를 활용해 하나의 페이지에서만 렌더링을 한다면 서버 사이드 렌더링은 최초에 사용자에게 보여줄 페이지를 서버에서 렌더링해 사용자에게  보여준다. 서버사이드 렌더링은 렌더링 주체가 '서버'로, 클라이언트에서 요청 시, 즉 서버에 리퀘스트가 도착할 때마다 렌더링 된다. 서버사이드 렌더링 방식의 장, 단점을 살펴보자.

 

• (1) FCP(First Contentful Paint)가 더 빠르다.
• (2) 검색 엔진 최적화에 유용하다.
• (3) 서버에서 작업하므로 보안에 좀 더 안전하다.

 

반면에 단점으로는,

 

• (1) TTV는 빠르지만 TTI를 개선할 필요가 있다.
• (2) 서버의 과부하로 인한 병목현상 등을 초래하여 사용자 경험 등에 문제를 일으킬 수 있다.

 

 

✔️ 리액트에서 SSR 적용하기 

 

그렇다면 리액트에서는 CSR만 가능할까? 아니다. 리액트만으로 SSR도 가능하다. react-dom/server API를 사용하면 리액트 컴포넌트를 서버에서 HTML로 렌더링 할 수 있다. 해당 API는 브라우저 환경이 아닌 Node.js와 같은 서버환경에서만 실행할 수 있다. 하지만 이렇게 구현하는 방식은 복잡하기 때문에 개발자 개인이 구현하는 것보다 Next.js와 같은 프레임워크를 사용해 서버 사이드 렌더링을 적용하는 것을 권장하고 있다.

 

 

✔️ SSG(Static Site Generation), ISR(Incremental Static Regeneration)

 

SSG와 ISR을 간단하게 살펴보면 두 렌더링 방법 모두 렌더링 하는 주체가 '서버'인 것은 동일하지만 '언제' HTML을 생성하는지에 따른 차이가 있다. SSG는 프로젝트를 빌드하는 시점에 미리 HTML을 렌더링 하고 이후 리액트 코드와 하이드레이션 작업을 거친다. 데이터가 정적이므로 홈페이지와 같이 모든 사용자가 동일한 화면을 보는 페이지를 만드는데 적합하다.

 

ISR은 Incremental 단어 의미처럼 증가하는, 지속적으로 업데이트하는 의미처럼 전체 사이트를 재생성하는 것 없이 정적인 페이지를 정해진 주기에 따라 업데이트(생성)한다.

 

 

(3) 하이브리드 렌더링 방식

Next.js는 하이드레이션을 사용함으로써 다양한 렌더링 방식을 적용할 수 있게 해 주고, 렌더링 기법(CSR, SSR, ISR, SSG)을 접목하여 '하이브리드'와 같이 페이지에 맞는 렌더링 기법을 적용할 수 있다. 페이지 특징별로 렌더링 방식을 적용하거나 한 페이지에서 특정 컴포넌트별로 렌더링을 혼합해서 사용함으로써 최적화된 애플리케이션을 만들 수 있게 해 준다.

 

 

---

참고

[책] 모던 리액트 딥다이브