Next.js의 렌더링 방식
2025.04.04 기술 토론#1
우리 팀이 Next.js를 도입한 이유
Next.js를 웹 프레임워크로 사용하면서, 다시 처음으로 돌아가 왜 Next.js를 쓰게 되었는지를 정리해보는 시간.
React vs. Next.js
🌐 React는 UI 라이브러리
컴포넌트를 기반으로 재사용 가능한 UI를 구성할 수 있다.
자체적인 라우팅, SSR, 파일 시스템 등은 제공되지 않고, 모든 설정(라우터, 상태 관리, 번들러 등)을 개발자가 직접 구성해야 함.
🌐 Next.js는 React 기반의 프레임워크
React에 필요한 기능들을 opinionated한 방식으로 제공한다.
SSR, SSG, ISR 등 다양한 렌더링 방식 지원.
페이지 기반 라우팅, API 라우트, 이미지 최적화, SEO 지원 등 포함.
-
opinionated한 방식이란, 프레임워크나 도구가 어떻게 개발할지를 미리 정해주는 것. 예를 들면 Next.js에서
app/page.tsx,pages/index.tsx와 같이 디렉토리 구조만 지킨다면 자동 라우팅이 적용되는 것. -
리액트는 라이브러리로서 개발에 있어 자유도가 높은 편이고, 기본적으로 CSR이기 때문에 서버사이드에서 미리 데이터를 로딩하려면 다른 기술을 활용해야 한다.
-
하지만 Next.js는 Vercel에서 만든 웹 프레임워크 도구로서, 자체 서버를 내장하여 고유의 Auth 기능이나 SSR을 비롯한 다양한 렌더링 방식을 손쉽게 프로젝트에 적용할 수 있다는 이점이 있었다.
-
따라서 Next.js가 제공하는 프로젝트 빌드 / 배포의 편리함과 비교적 짧은 기간 내에 Agile한 개발이 필요한 현 프로젝트(=YOLA)에서는 Netx.js를 핵심 프레임워크로 도입하게 되었다.
Next.js의 렌더링 방식
Next.js가 가지는 장점 중 하나인 다양한 렌더링 방식.
종류는 SSG/SSR/CSR/ISR이 있다.
-
SSG (Static Site Generation)
: Next13, 14의 default setting
- 다만 Next.js 15버전부터는 기본적으로
no-store로 변경, 따라서 캐싱이 필요한 경우force-cache명시적인 사용이 필요하다. - SSG는 빌드 시점에 서버에서 데이터 페칭 및 HTML 생성이 완료되며, 브라우저는 정적 HTML을 먼저 렌더링한 뒤, 자바스크립트가 로드되면서 hydration이 진행된다.
- 다만 Next.js 15버전부터는 기본적으로
-
SSR (Server Side Rendering)
: 브라우저가 요청할 때마다 서버에서 HTML을 생성해서 응답하는 방식으로, Next15의 default fetch option이다.
-
fetch()에 별도의 옵션을 주지 않으면 기본적으로cache: 'no-store'가 적용되고, 캐싱을 원한다면 명시적인 설정이 필요하다.fetch(url, { cache: 'force-cache' }) // 빌드 시 정적 캐싱fetch(url, { next: { revalidate: 60 } }) // ISR 캐싱(60초)
-
CSR (Client Side Rendering)
: 초기 페이지는 최소한의 HTML과 JS만 받고, 브라우저에서 렌더링을 수행하는 방식.
-
데이터 페칭과 렌더링 모두 클라이언트 측(JavaScript) 에서 처리되고, 초기 로딩은 느릴 수 있으나 이후 페이지 전환은 빠른 편이다.
-
CSR은 React의 기본 렌더링 방식이다.
- React는 본래 SPA(Single Page Application) 구조를 기반으로 하고 있어서, 브라우저에서 JavaScript를 통해 페이지를 렌더링하는 Client Side Rendering(CSR) 방식이 기본임
-
ISR (Incremental Static Regeneration)
: 빌드 시 생성된 정적 페이지를 일정 시간 후에 백그라운드에서 재생성하는 방식
-
첫 요청 시 정적 HTML 제공, revalidate 설정된 시간 이후(=stale해진 상태) 요청이 들어올 때 백그라운드에서 HTML을 재생성한다. 재생성된 페이지는 다음 요청부터 사용됨.
- 따라서
{ revalidate: 60 }조건 하,ISR 페이지에서 60초 이내에 나갔다 들어오면 캐시된 데이터를 보여주고, 60초가 지난 후에 접근하면 기존 데이터를 먼저 보여준 뒤 백그라운드에서 새로운 데이터를 가져와 정적 페이지를 갱신한다. - 단, 같은 페이지에 계속 머무를 경우에는 새로운 요청이 발생하지 않는 한 revalidation은 일어나지 않는다.
(페이지 재방문이나 페이지 내부에서 fetch 기반 요청이 있어야 revalidate 트리거)
- 따라서
