intro 1년 동안 업무를 하며 비즈니스 측면을 이해하고 나니 SEO에 대한 중요성을 이해하게 되었고, CSR 방식의 단점에 대해서도 다시금 깨닫게 되었다. 그러나 SPA를 너무나도 사랑하는 나로서는 React와 같은 라이브러리를 포기하는 것이 쉽지 않았다. 그러던 중 작년부터 Next.js를 눈여겨보고 있었는데 드디어 배워야 할 완전한 동기가 생겨 늦었지만 나의 학습기를 기록해보고자 한다.
The React Framework for the Web
Next.js는 React 프레임워크이다. 소프트웨어 개발을 위한 공통적인 구성요소를 사용하여 전체적인 애플리케이션 구조를 만들어 내는 것을 프레임워크라고 한다. 즉, React 기반의 웹 어플리케이션을 쉽게 개발하고 배포할 수 있도록 돕는 프레임워크인 것이다. 그렇다면 Next.js는 구체적으로 어떻게 도와주는 것일까?
Next.js는 SSR(Server-Side Rendering), SSG(Static Site Generation), API Routes, SEO 최적화, 라우팅 시스템 등이 내장되어 있어 기존의 CSR(Client-Side Rendering) 방식이었던 React의 단점을 보완해준다.
공식 문서를 보며 더 구체적인 기능/특징들을 파악해 보도록 하겠다.
Built-in Optimizations
이미지는 웹사이트를 무겁게 만드는 요인 중 하나이다. 때문에 프로젝트를 진행할 때마다 이미지 최적화 작업은 필수이다.
그런데 Next.js는 이러한 정적 리소스에 대해 최적화하는 기능을 자체적으로 제공한다.
- 이미지 크기 최적화: 최신 이미지 형식을 사용하여 각 장치에 맞는 크기의 이미지를 자동으로 제공
- Lazy Loading: 뷰포트에 들어올 때만 로드
- 반응형 지원: 원본의 이미지를 원하는 해상도에 맞게 리사이징 하여 전송
Dynamic HTML Streaming
페이지의 중요한 부분을 먼저 렌더링 하고, 나머지 데이터가 준비되면 점진적으로 업데이트가 가능하도록 기능을 제공한다.
- Loading UI: 특정 페이지나 레이아웃의 콘텐츠가 로드될 때 "로드 상태"를 표시할 수 있는 기능을 제공
- Streaming Rendering: React의 Server Components와 Suspense를 활용하여 콘텐츠를 부분적으로 스트리밍 제공
React Server Components
Next.js의 기본 렌더링 방식으로, 서버에서 실행되는 React Component를 의미한다. 서버에서 실행하게 되면 브라우저에 JavaScript 번들을 전송하지 않아도 되기 때문에 성능을 향상한다. 또한, Data Fatching, API 호출을 서버에서 직접 수행할 수 있다. 그러나 서버에서 실행되기에 클라이언트에서 사용했던 상태(State)나 이벤트 핸들러, React Hook, 브라우저 API를 사용할 수 없다는 특징이 있다.
클라이언트에서 상태(State)나 이벤트 핸들링이 필요할 경우에는 파일 상단에 "use client" 지시어를 추가하여 클라이언트 컴포넌트로 변환해서 사용할 수 있다. 특징을 정리하면 아래와 같다.
- 서버 컴포넌트에서 클라이언트 컴포넌트를 포함할 수 있다. 그러나 반대 개념은 불가능
- 불필요한 JavaScript를 클라이언트로 전송하지 않으므로 렌더링 속도 향상
- 서버에서 HTML을 렌더링 하여 클라이언트에 전달하므로 SEO에 유리
- 민감한 데이터가 서버에서만 처리되므로 보안이 강화됨 (클라이언트에 노출되지 않음)
- 서버에서 직접 데이터를 불러오기 때문에 네트워크 요청을 줄이고 빠르게 렌더링 가능
Server Components의 렌더링 방식에 대해서는 해당 주제만을 다룬 글로 알아보도록 하겠다.
CSS Support
Next.js는 CSS Modules, Global CSS, Tailwind CSS, Sass/SCSS, CSS-in-JS와 같은 다양한 스타일링 방법을 지원한다.
Route Handlers
웹 요청(Request)과 응답(Response) API를 사용하여 특정 경로에 대한 사용자 지정 요청 핸들러를 만든다.
- app/api/ 디렉터리 아래에 파일을 생성하여 서버에서 실행되는 API Endpoint*를 만들 수 있는 기능을 제공
- GET, POST, PUT, DELETE 등의 HTTP 메서드 처리 가능
- 동적 경로, 쿠키, 헤더 등을 쉽게 다룰 수 있음
*클라이언트가 서버와 통신할 수 있도록 제공하는 URL 주소
이 외에도
- Middleware: 클라이언트 요청이 서버에 도달하기 전에 실행되는 함수인 미들웨어를 활용하여 요청을 가로채서 인증, Redirecting, Logging 등을 처리하는 기능
- Data Fatching: 서버 컴포넌트(Server Components)와 클라이언트 컴포넌트(Client Components)에 따라 데이터를 가져오는 방법
- Rendering: 주요 렌더링 방식(SSG, SSR, ISR, CSR)을 하이브리드(Hybrid) 애플리케이션을 만드는 방법
- Server Actions: API Route 없이 클라이언트에서 직접 서버 함수를 실행하여 데이터를 요청/업데이트하는 기능
- Advanced Routing & Nested Layouts: React에서는 react-router를 사용해 라우팅을 직접 설정해야 하는 방식이었지만, Next.js는 파일 기반 라우팅 시스템을 제공하여 폴더와 파일을 생성하는 것만으로도 자동으로 라우트(URL 경로)가 만들어지는 기능
등과 같은 기능/특징들을 가지고 있어서 리액트의 문제점들을 보완해 준다.
Next.js의 공식 사이트의 메인 영역을 읽으며, 간략하게 어떤 기능을 하는 프레임워크인지 파악해 보았다. 숲을 보았으니 본격적으로 다이빙할 차례다. 기능 하나하나 실제로 사용해 보면서 지금보다는 더 심층적인 글을 기약하며 이번 글을 마친다.