Next.js는 서버 사이드 렌더링을 지원한다
리액트와 같은 자바스크립트 기반의 애플리케이션은 JavaScript로 동작하기 때문에,
JavaScript를 다운로드한 후 브라우저에서 실행되어야만 UI가 화면에 표시된다.
이런 방식은 클라이언트 쪽에서 렌더링한다고 하여 클라이언트 사이드 렌더링(CSR)이라고 한다.
클라이언트 사이드 렌더링의 단점
- 자바스크립트가 동작하지 않는 환경에서는 화면이 표시되지 않아, 검색엔진 등의 로봇이 컨텐츠를 읽지 못하는 치명적인 문제가 있다.
- 자바스크립트를 다운로드하고 실행하기 전까지는 화면이 보이지 않아 사용자 경험이 떨어질 수 있다.
그렇다면 서버 사이드 렌더링이란?
서버 사이드 렌더링(SSR)은 JavaScript가 서버에서 실행되어 완성된 HTML을 브라우저에 전달한다.
이 방식은 자바스크립트를 실행할 수 없는 환경에서도 페이지가 잘 작동하며 SEO, 빠른 첫 화면 로딩에 강점을 갖는다.
다운로드 받는 즉시 실행되기 때문에 사용자 입장에서는
눈 깜빡할 사이에 웹페이지가 표시되는 느낌을 받게 됩니다.
Next.js에서 제공하는 주요 기능
⭐ 내장 최적화 기능 (Built-in Optimizations)
코드 스플리팅, 이미지 최적화, 폰트 최적화, lazy loading 등을 자동으로 처리하여 성능을 향상시킨다.
동적 HTML 스트리밍 (Dynamic HTML Streaming)
React 18의 Streaming SSR 기반으로, 서버에서 점진적으로 HTML을 전송하여 초기 로딩 속도를 개선한다.
⭐ 리액트 서버 컴포넌트 (React Server Components)
서버에서만 렌더링되는 컴포넌트로, 불필요한 JavaScript 전송을 줄여 성능을 향상시키며 App Router에서 기본적으로 사용된다.
⭐ 데이터 패칭 (Data Fetching)
getStaticProps, getServerSideProps, fetch, cache, use 등 다양한 방법으로 클라이언트와 서버에서 데이터를 유연하게 가져올 수 있다.
CSS 지원 (CSS Support)
CSS Modules, 전역 CSS, Tailwind CSS, Sass 등 다양한 스타일링 방식을 유연하게 지원한다.
⭐ 클라이언트 & 서버 렌더링 (Client and Server Rendering)
CSR과 SSR을 페이지 또는 컴포넌트 단위로 유연하게 선택해 구현할 수 있다.
서버 액션 (Server Actions)
use server 지시어를 활용해 클라이언트에서 직접 서버 함수를 실행할 수 있으며, App Router에서 실험적으로 제공된다.
라우트 핸들러 (Route Handlers)
/app/api/route.ts 형식으로 API 요청을 처리하는 핸들러를 구성할 수 있어 기존 API Routes를 대체한다.
⭐ 고급 라우팅 & 중첩 레이아웃 (Advanced Routing & Nested Layouts)
App Router 기반의 폴더 구조를 활용하여 중첩 레이아웃, 병렬 라우트, 인터셉팅 라우트 등 고급 라우팅 패턴을 구현할 수 있다.
미들웨어 (Middleware)
요청이 처리되기 전에 인증, 리디렉션, 로깅 등의 작업을 수행할 수 있으며, Edge Runtime 환경에서 실행된다.
