Frontend/React

Next.js vs 리액트: CSR과 SSR의 결정적 차이

미니임 2026. 3. 1. 23:01

 

현대 웹 생태계에서 '리액트(React)를 사용할 것인가, 넥스트제이에스(Next.js)를 사용할 것인가'라는 고민은 단순히 라이브러리와 프레임워크의 선택을 넘어, 사용자 경험(UX)과 비즈니스 전략을 결정하는 중요한 기로입니다.

과거의 웹이 단순히 정보를 보여주는 정적인 문서였다면, 지금의 웹은 복잡한 상태를 관리하는 하나의 거대한 애플리케이션입니다. 이 변화의 중심에서 리액트가 표준으로 자리 잡았지만, 왜 우리는 다시금 서버 사이드 렌더링(SSR)이라는 '고전적인' 개념을 결합한 Next.js에 열광하는지 그 본질을 파헤쳐 보겠습니다.

1. 렌더링 방식의 Deep Dive: CSR vs SSR

두 기술의 근본적인 차이는 **"HTML을 어디서 만드는가?"**에 있습니다.

클라이언트 사이드 렌더링 (CSR) - 리액트 방식

리액트 단독 사용 시 기본값인 CSR은 빈 HTML 뼈대와 거대한 자바스크립트 파일을 브라우저에 던져줍니다. 브라우저가 이 파일을 다운로드하고 실행하는 순간 비로소 화면이 그려지죠.

  • 비유: 요리 재료와 레시피를 손님 식탁에 가져다주고, 손님이 직접 요리해서 먹게 하는 식당과 같습니다. 초기 세팅은 빠르지만(서버 부담 적음), 손님은 요리가 완성될 때까지 굶주려야 합니다(초기 로딩 지연).

서버 사이드 렌더링 (SSR) - Next.js 방식

Next.js는 서버에서 미리 HTML을 완성하여 브라우저에 전달합니다. 브라우저는 받자마자 화면을 띄울 수 있고, 그 뒤에 자바스크립트가 결합(Hydration)되어 상호작용이 가능해집니다.

  • 비유: 주방에서 요리를 모두 끝내서 서빙하는 식당입니다. 손님은 앉자마자 음식을 먹을 수 있습니다. 다만, 주방(서버)은 항상 바쁘게 움직여야 하죠.

2. 실전 예제: 이커머스 상품 상세 페이지 구현

단순한 카운터 예제가 아닌, **검색 엔진 최적화(SEO)**와 초기 로딩 속도가 매출과 직결되는 이커머스 시나리오를 통해 차이를 확인해 보겠습니다.

React (CSR) 방식의 한계

React에서는 데이터를 가져오는 동안 사용자는 빈 화면이나 로딩 스피너를 보게 됩니다.

JavaScript
 
// React 상품 상세 페이지 (CSR)
import { useState, useEffect } from 'react';

function ProductDetail({ productId }) {
  const [product, setProduct] = useState(null);

  useEffect(() => {
    // 브라우저에 로드된 후 비로소 데이터를 호출함
    fetch(`/api/products/${productId}`)
      .then(res => res.json())
      .then(data => setProduct(data));
  }, [productId]);

  if (!product) return <div>Loading...</div>; // 검색 로봇은 이 문구만 수집할 가능성이 높음

  return (
    <div>
      <h1>{product.name}</h1>
      <p>{product.description}</p>
    </div>
  );
}

Next.js (SSR/ISR) 방식의 진화

Next.js는 getServerSideProps나 getStaticProps를 통해 데이터가 포함된 HTML을 서버에서 생성합니다.

JavaScript
 
// Next.js 상품 상세 페이지 (SSR)
// 이 함수는 서버에서만 실행됩니다.
export async function getServerSideProps(context) {
  const { id } = context.params;
  const res = await fetch(`https://api.example.com/products/${id}`);
  const product = await res.json();

  // 데이터가 포함된 상태로 컴포넌트에 전달됩니다.
  return { props: { product } };
}

export default function ProductDetail({ product }) {
  return (
    <article>
      {/* 사용자는 접속 즉시 완성된 HTML을 보게 되며, SEO 점수가 극대화됩니다. */}
      <h1>{product.name}</h1>
      <mark>{product.price}원</mark>
      <section>{product.description}</section>
    </article>
  );
}

3. 트러블슈팅: SSR 도입 시 주의할 점

SSR이 무조건적인 정답은 아닙니다. 개발 시 흔히 마주치는 함정들이 있습니다.

  1. Window is not defined: 서버 환경(Node.js)에는 window나 document 객체가 없습니다. 브라우저 전용 API를 사용할 때는 useEffect 내부에서 실행하거나, dynamic import로 클라이언트 전용 컴포넌트를 분리해야 합니다.
  2. 서버 부하 관리: 모든 페이지를 SSR로 처리하면 트래픽 급증 시 서버가 비명을 지를 수 있습니다. 변경이 적은 페이지는 **SSG(Static Site Generation)**를, 실시간성이 중요한 데이터는 Client-side fetching을 섞어 쓰는 전략이 필요합니다.

4. 선택의 기준 (Trade-offs)

기술 결정의 핵심은 비즈니스의 성격입니다.

구분 React (CSR) Next.js (SSR/SSG)
핵심 이점 높은 상호작용성, 서버 비용 절감 뛰어난 SEO, 빠른 첫 페이지 로딩
적합한 서비스 관리자 대시보드, 개인화된 설정 앱 쇼핑몰, 블로그, 뉴스, 마케팅 페이지
런닝 커브 상대적으로 낮음 파일 시스템 기반 라우팅 등 학습 필요

결론: 무엇을 선택할 것인가?

만약 당신이 만드는 서비스가 구글 검색 결과 상단에 노출되어야 하고, 사용자가 링크를 클릭했을 때 1초라도 빨리 의미 있는 콘텐츠를 보여줘야 한다면 Next.js는 선택이 아닌 필수입니다. 반면, 로그인이 필수이며 검색 노출이 필요 없는 복잡한 사내용 툴을 만든다면 React의 가벼운 CSR 방식이 더 효율적일 수 있습니다.

단순히 트렌드를 따르기보다, 현재 해결하려는 문제가 **"검색 노출과 초기 진입 속도"**인지, 아니면 **"복잡한 클라이언트 상태 관리"**인지를 먼저 자문해 보시기 바랍니다.

반응형