웹 개발의 흐름은 곧 렌더링 방식의 역사라고 해도 과언이 아니다.

오늘날의 React, Next.js, Vue, Nuxt.js 같은 프레임워크는 SPA, CSR, SSR, 그리고 Hybrid Rendering이라는 철학 위에 세워져 있다.

이번 글에서는 이 네 가지 개념의 관계와 진화 과정을 한눈에 이해할 수 있도록 정리해본다.

 

1. SPA의 등장 배경

초기의 웹은 정적 HTML 문서로 구성되어, 사용자가 페이지를 이동할 때마다 서버가 완성된 HTML을 새로 내려주는 방식(SSR) 을 사용했다. 이 방식은 단순했지만, 페이지 전환 시마다 전체 새로고침이 발생(리로드)하여 깜빡이는 현상이 있어 사용자 경험(UX)이 끊기고, 매번 서버로부터 전체 문서를 받아오므로 네트워크 낭비가 있어 대규모 애플리케이션 구성에 한계가 있었다.

 

이후 등장한 자바스크립트와 Ajax 기술은 페이지 전체를 새로 로드하지 않고 일부 데이터만 갱신할 수 있게 만들었는데, 이를 바탕으로 등장한 개념이 바로 SPA (Single Page Application) 이다. SPA는 애플리케이션이 한 번만 로드되고, 그 이후에는 필요한 데이터만 비동기적으로 교체하며 화면을 업데이트한다. 한마디로, “페이지 전환은 있지만 실제로는 페이지 이동이 없는 앱”이 바로 SPA다.

 

SPA는 AJAX의 발전과 함께 React, Vue, Angular 같은 프레임워크의 등장으로 대중화되었고, 이후 CSR(클라이언트 사이드 렌더링) 방식으로 구현되기 시작했다.

 

2. SPA와 CSR의 관계

많은 개발자들이 “SPA와 CSR은 같은 것 아닌가요?”라고 묻는다. 하지만 SPA는 애플리케이션 구조를 의미하고, CSR은 렌더링 방식이다.

  • SPA(Single Page Application): 하나의 페이지 안에서 동적으로 콘텐츠를 교체하는 구조
  • CSR(Client Side Rendering): 렌더링을 서버가 아니라 클라이언트(브라우저) 에서 수행하는 방식

즉, 대부분의 SPA는 CSR을 사용하지만, 반드시 CSR에만 종속된 것은 아니다. 최근에는 SSR(서버 사이드 렌더링)이나 SSG(정적 사이트 생성) 기반의 SPA도 많다.

 

3. CSR (Client Side Rendering)

CSR은 초기에 빈 HTML 껍데기만 서버에서 내려주고, 이후 JavaScript가 실행되면서 UI를 동적으로 그리는 방식이다. React, Vue 같은 프레임워크가 대표적으로 사용한다.

 

장점

  • 빠른 페이지 전환 속도
  • 새로고침 없이 앱처럼 자연스러운 UX
  • 프론트엔드 중심 개발 구조

단점

  • 초기 로딩 속도 느림 (JS 의존)
  • SEO 취약 (HTML 비어 있음)
  • JS 비활성화 시 화면 표시 불가

 

코드 예시

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>CSR Example</title>
    <script defer src="app.js"></script>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>
// app.js
import React, { useState } from "react";
import { createRoot } from "react-dom/client";

function App() {
  const [page, setPage] = useState("home");

  return (
    <div>
      <nav>
        <button onClick={() => setPage("home")}>Home</button>
        <button onClick={() => setPage("about")}>About</button>
      </nav>

      {page === "home" && <h1>🏠 Home Page</h1>}
      {page === "about" && <h1>📖 About Page</h1>}
    </div>
  );
}

createRoot(document.getElementById("root")).render(<App />);

 

4. SSR (Server Side Rendering)

SSR은 서버가 요청 시마다 HTML을 완성한 뒤 브라우저로 전송하는 방식이다. React 기반의 Next.js, Vue 기반의 Nuxt.js가 대표적인 SSR 프레임워크다.

 

장점

  • 빠른 초기 렌더링
  • SEO 친화적
  • JS 실행 전에도 기본 콘텐츠 표시 가능

단점

  • 서버 부하 증가
  • 페이지 전환 시 새 요청 발생
  • 서버·클라이언트 상태 동기화 필요

코드 예시(Node.js)

// server.js
import express from "express";
import React from "react";
import ReactDOMServer from "react-dom/server";

const app = express();

function App() {
  return <h1>🚀 Hello from SSR</h1>;
}

app.get("/", (req, res) => {
  const html = ReactDOMServer.renderToString(<App />);
  res.send(`
    <!DOCTYPE html>
    <html>
      <head><title>SSR Example</title></head>
      <body>
        <div id="root">${html}</div>
        <script src="/client.js"></script>
      </body>
    </html>
  `);
});

app.listen(3000, () => console.log("SSR server running on port 3000"));

 

5. SPA(CSR) vs SSR 비교

구분 SPA (CSR) SSR
초기 로딩 속도 느림 (JS 의존) 빠름 (HTML 즉시 렌더링)
페이지 전환 빠름 (JS로 처리) 느림 (서버 요청 필요)
SEO 불리 유리
서버 부하 적음 많음
UX 앱처럼 부드러움 새로고침 느낌
구조 복잡도 단순 복잡 (상태 동기화 필요)

 

6. Hybrid Rendering — CSR 과 SSR 의 장점 합치기

현대의 프레임워크는 CSR과 SSR의 장점을 모두 취하는 하이브리드 렌더링(Hybrid Rendering) 방식을 채택한다.

초기 요청 시에는 SSR로 빠르게 렌더링하고, 이후에는 CSR처럼 클라이언트에서 상호작용을 한다. 이를 통해 SEO 최적화 + 빠른 초기 로딩 + 자연스러운 UX를 모두 달성할 수 있다. 대표적으로 Next.js, Remix, Nuxt.js가 이 모델을 구현한다.

 

 

장점

  • 초기 렌더링 빠름
  • SEO에 강함
  • CSR처럼 부드러운 UX 제공
  • 페이지별로 서버/클라이언트 렌더링 전략 선택 가능

단점

  • 구조가 복잡 (렌더링 경계 관리 필요)
  • 서버·클라이언트 상태 동기화 필요
  • 초기 설정 및 배포 구조 이해 필요

 

예시코드(Next.js)

// app/page.tsx (Next.js)
export default async function Page() {
  // ✅ 서버에서 실행됨 (Server Side Rendering)
  const data = await fetch("https://api.example.com/posts", {
    cache: "no-store",
  }).then((res) => res.json());

  return (
    <main>
      <h1>📰 Blog Posts</h1>
      <ul>
        {data.map((post: any) => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </main>
  );
}
// components/Counter.tsx (CSR로 동작하는 클라이언트 컴포넌트)
"use client";

import { useState } from "react";

export default function Counter() {
  const [count, setCount] = useState(0);
  return (
    <button onClick={() => setCount(count + 1)}>
      Count: {count}
    </button>
  );
}

 

Page는 서버 컴포넌트 이므로 HTML을 서버에서 미리 렌더링하고, Counter는 클라이언트 컴포넌트 이므로 브라우저에서 동작한다. Next.js는 이 두 방식을 자동으로 병합(hybrid) 하여 초기 페이지 로딩 속도를 빠르게 하고, 이후 사용자 상호작용은 부드럽게 처리한다.

 

7. 결론 — 웹 렌더링은 “균형의 예술”

웹 렌더링은 “서버 vs 클라이언트”의 대립이 아니라, 사용자 경험과 성능의 균형을 찾는 과정이다.

SPA는 CSR에서 시작했지만, 이제는 SSR·*SSG·**ISR 등 다양한 렌더링 전략과 결합되어 하이브리드 형태로 진화하고 있다.

결국 중요한 것은 “내 앱의 목적이 무엇인가?”다.

  • 콘텐츠 중심이라면 SSR,
  • 인터랙션 중심이라면 CSR,
  • 두 가지 모두 중요하다면 Hybrid Rendering이 답이 될 수 있다.

 

 

 

*SSG(Static Site Generation) 는 빌드 시점에 HTML을 미리 생성해 서버나 CDN에 저장하는 방식으로, 요청 시 서버 렌더링 없이 빠르게 페이지를 제공하며 SEO에도 유리하다. 단점은 실시간 데이터 반영이 어렵고, 빌드 시간이 길어질 수 있다는 점이다.

 

**ISR(Incremental Static Regeneration)은 SSG의 한계를 보완한 방식으로, 정적 페이지를 캐시해 제공하면서 백그라운드에서 필요할 때만 갱신한다. 덕분에 초기 로딩 속도는 빠르면서도 데이터 변경에 유연하게 대응할 수 있다. 다만 구현 복잡도가 증가하고 캐시 전략을 신경 써야 한다.

'Computer Science > Web Development' 카테고리의 다른 글

CORS Error 는 왜 자주 발생할까? — 교차 출처 리소스 공유  (0) 2025.10.18
JWT(Json Web Token)  (0) 2025.10.17
z-index가 같아도 겹치는 순서가 달라지는 이유  (0) 2025.10.16
Document Object Model(DOM)  (0) 2025.10.16
브라우저의 동작 원리  (0) 2025.10.15

티스토리툴바