[Rendering] SSR, CSR, SSG, ISR

 

 

 

 

 

---

 

 

📑 Rendering 

브라우저가 HTML, CSS, JavaScript를 파싱하여 사용자에게 화면을 보여주는 과정을 의미합니다. 

크게 서버 사이드 렌더링(SSR), 클라이언트 사이드 렌더링(CSR), 정적 사이트 생성(SSG) 등으로 나뉩니다. 렌더링은 HTML 파싱을 통해 DOM 트리를 만들고, CSSOM과 결합하여 렌더 트리를 구성하며, 레이아웃 계산과 페인팅 단계를 거쳐 화면에 최종적으로 그려집니다. 

 

 

https://www.youtube.com/watch?v=BEwv4to9OWY

 

 

 

 

 

✅ 서버 사이드 렌더링 ( SSR - Server Side Rendering  )

요청이 올 때 마다 해당하는 HTML 문서를 그때 그때 서버에서 완성된 HTML을 생성하여 브라우저로 반환한다.

SSR을 사용하면 각 요청에 대해 서버에서 HTML 페이지를 생성하여 초기 렌더링이 빠르며 필요한 모든 데이터와 마크업(최적화(SEO))을 포함할 수 있다. 

 

👍 장점
1. 항상 최신 데이터 반영 가능
2. SEO에 강함 (HTML 완성 상태로 전송)
3. 초기 로딩 속도 빠름 (JS 로딩 전에도 콘텐츠 표시 가능)

⚠️ 단점
1. 서버 부하가 큼 (요청마다 렌더링 수행)
2. 응답 속도 느림 (정적 파일보다 늦음)
3. 서버가 반드시 필요함 (호스팅 비용 발생)

// pages/news/[id].js
export async function getServerSideProps(context) {
  const { id } = context.params;
  const res = await fetch(`https://api.example.com/news/${id}`);
  const news = await res.json();

  return { props: { news } };
}

export default function NewsPage({ news }) {
  return (
    <div>
      <h1>{news.title}</h1>
      <p>{news.content}</p>
    </div>
  );
}

 

 

✅ 클라이언트 사이드 렌더링 ( CSR - Client Side Rendering  )

React, Vue, Angular 같은 SPA(Single Page Application)방식으로 브라우저에서 자바스크립트 파일을 다운로드한 후, 클라이언트 측에서 렌더링을 수행하는 방식입니다.

사용자 상호작용이 많은 페이지나 실시간 데이터가 필요한 경우 사용하면 유용합니다.

 

※ SPA(Single Page Application) - 최초 한 번 페이지 전체를 로딩한 뒤, 데이터만 변경하여 사용할 수 있는 애플리케이션

 

👍 장점
1. 빠른 페이지 전환 – 한 번 로드 후엔 새로고침 없이 화면만 갱신
2. 서버 부하 적음 – 데이터만 요청하므로 서버 부담 ↓
3. 동적 UI/UX 가능 – React나 Vue 같은 SPA 구현에 적합

⚠️ 단점
1. 초기 로딩 느림 – JS 다운로드 & 실행 후 렌더링되기 때문에 첫 화면까지 시간 소요
2. SEO 불리함 – HTML이 비어 있어 검색 엔진이 내용을 인식하기 어려움
3. JS 의존도 높음 – JS 오류 시 화면 전체가 깨질 수 있음

import { useEffect, useState } from "react";

function Products() {
  const [products, setProducts] = useState([]);

  useEffect(() => {
    fetch("/api/products")
      .then((res) => res.json())
      .then((data) => setProducts(data));
  }, []);

  return (
    <ul>
      {products.map((p) => (
        <li key={p.id}>{p.name}</li>
      ))}
    </ul>
  );
}

export default Products;

 

 

 

구분	설명	예시
서버(Server)	데이터를 제공하거나 HTML 파일을 반환하는 쪽	웹 서버, API 서버 (예: Node.js, Django, Spring 등)
클라이언트(Client)	서버로부터 데이터를 받아 화면에 표시하는 쪽	사용자의 웹 브라우저 (Chrome, Edge, Safari 등)

 

✅ 정적 사이트 생성 ( SSG - Static Site Generation )

HTML을 빌드 타임에 미리 생성하고 요청이 올 경우 이미 생성된 HTML 문서를 반환한다. SSG를 사용하면 HTML 페이지가 빌드 시간에 생성되고 정적 에셋으로 제공되어 각 요청마다 서버 사이드 렌더링이 필요하지 않게 된다.

SSG는 콘텐츠가 많은 웹사이트나 업데이트 빈도가 낮은 애플리케이션에 적합하며, 빠른 로딩 시간과 효율적인 캐싱을 가능하게 한다.

 

👍 장점
1. 빠른 로딩 속도 : HTML이 이미 준비되어 있으므로 즉시 렌더링됨
2. 높은 안정성 : 서버 부하가 거의 없음
3. SEO 친화적 : 검색 엔진이 정적 HTML을 바로 크롤링 가능
4. 보안성 높음 : DB 연결이 필요 없음

⚠️ 단점
1. 실시간 데이터 반영 어려움 : 데이터가 변하면 다시 빌드해야 함
2. 빌드 시간이 길어질 수 있음: 페이지 수가 많으면 생성 시간이 증가
3. 동적 페이지 대응 어려움 : 사용자별 맞춤 데이터는 부적합

// pages/posts/[id].js
export async function getStaticPaths() {
  const res = await fetch('https://api.example.com/posts');
  const posts = await res.json();

  const paths = posts.map(post => ({params: { id: post.id.toString() }}));
  return { paths, fallback: false };
}

export async function getStaticProps({ params }) {
  const res = await fetch(`https://api.example.com/posts/${params.id}`);
  const post = await res.json();
  return { props: { post } };
}

export default function Post({ post }) {
  return (
    <article>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </article>
  );
}

 

 

✅ 증분 정적 재생성 ( ISR - Incremental Static Regeneration  )

기존의 정적 사이트 생성(SSG)을 보다 동적으로 사용할 수 있도록 더욱 확장해 주는 개념으로 볼 수 있습니다. 

증분 정적 재생성(ISR)을 사용하면 정적 페이지를 런타임에서도 주기적으로 업데이트할 수 있으며, 초기 빌드 타임 이후에도 전체 사이트를 다시 빌드 할 필요 없이 원하는 페이지만 새 데이터로 갱신하고 업데이트하면서도 성능에 대한 최적화를 할 수 있는 현대적 웹 개발 기술입니다.

 

👍 장점
1. SSG처럼 빠름 (CDN 캐시 사용 가능)
2. SSR처럼 데이터 최신성 유지 가능
3. 서버 부하 적음 (재빌드 최소화)
4. SEO에 강함 (정적 HTML 제공)

⚠️ 단점
1. revalidate 주기 안에서는 구버전 노출 가능
2. 백그라운드 재생성 중 오류 발생 시, 이전 페이지 유지됨
3. 실시간성이 중요한 서비스에는 부적합 (몇 초 단위의 변동 반영 어려움)

// pages/posts/[id].js
export async function getStaticPaths() {
  const res = await fetch("https://api.example.com/posts");
  const posts = await res.json();

  const paths = posts.map((post) => ({params: { id: post.id.toString() },}));
  return { paths, fallback: "blocking" };
}

export async function getStaticProps({ params }) {
  const res = await fetch(`https://api.example.com/posts/${params.id}`);
  const post = await res.json();

  return {
    props: { post },
    revalidate: 60, // ⏰ 60초마다 페이지를 다시 생성
  };
}

export default function Post({ post }) {
  return (
    <article>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </article>
  );
}

 

 

 

✅ 요약정리

렌더링 방식	시점	특징
SSR (Server-Side Rendering)	요청 시 (runtime)	매 요청마다 서버에서 HTML 생성 (동적 데이터 가능하지만 느림)
CSR (Client-Side Rendering)	클라이언트 측	JS 로딩 후 렌더링 (초기 로딩 느림, SPA 형태)
SSG (Static Site Generation)	빌드 시 (build time)	미리 생성된 HTML 제공 (가장 빠름, 정적 데이터에 적합)
ISR (Incremental Static Regeneration)	빌드 + 재생성	SSG + 정해진 주기로 일부 페이지 재생성 (Next.js에서 제공)