CSR, SSG, SSR

 CSR (Client-Side Rendering)

- 클라이언트 사이드 렌더링
모든 렌더링을 브라우저에서 수행
초기 HTML은 최소한의 구조만 있고, JS가 실행되면서 UI를 그려줌

예: React + Vite, Create React App (CRA), SPA(Single Page Application)

장점

•  첫 로딩 이후 빠른 페이지 이동 (CSR에서는 전체 페이지가 다시 로드되지 않음)
•  서버 부담이 적고, CDN 캐싱 가능
  
  

단점

 

• 첫 페이지 로딩이 느릴 수 있음 (JS가 로드된 후 렌더링 시작)
• SEO(검색엔진 최적화)에 불리함 (초기 HTML이 비어 있음)

 

 CSR이 적합한 경우

SEO가 중요하지 않은 웹앱 (예: 내부 대시보드, 관리자 페이지)
페이지 이동이 많고 빠른 네비게이션이 필요한 경우

 

일반적으로 CSR(Client-Side Rendering) 방식에서는 빌드 시 단 하나의 `index.html` 파일이 생성됩니다.

 

📂/build
 ├── index.html
 ├── 📂 static
 │   ├── css
 │   ├── js
 │   ├── media
 ├── asset-manifest.json
 ├── robots.txt
 ├── ...

 

 

SEO (Search Engine Optimization)란?

SEO는 검색 엔진 최적화(Search Engine Optimization)의 약자로, Google, Bing, Naver 같은 검색 엔진에서 웹사이트가 상위에 노출되도록 최적화하는 기술을 말합니다.

---

 SSG (Static Site Generation)

빌드 타임에 HTML을 미리 생성해서 정적 파일로 제공
Next.js의 getStaticProps()가 대표적인 방식

=> getStaticProps는 빌드 시점에만 데이터를 가져와서 HTML 파일을 미리 생성합니다.

 장점

• 매우 빠른 로딩 속도 (HTML이 미리 생성되어 있음)
• SEO 최적화에 좋음 (완전한 HTML을 제공)\
• 서버 부담이 적음 (CDN에서 제공 가능)

 

단점 

• 실시간 데이터 반영이 어려움 (빌드할 때 HTML이 고정됨)
•  페이지 수가 많으면 빌드 시간이 오래 걸림

 

SSG가 적합한 경우

 

블로그, 뉴스 사이트처럼 자주 변경되지 않는 콘텐츠
마케팅, 랜딩 페이지 등

 

export default function Home({ posts }) {
  return (
    <div>
      <h1>SSG Example: Posts List</h1>
      <ul>
        {posts.map(post => (
          <li key={post.id}>
            <a href={`/posts/${post.id}`}>{post.title}</a>
          </li>
        ))}
      </ul>
    </div>
  );
}

export async function getStaticProps() {
  // 예시 데이터, 실제로는 API에서 가져올 수 있음
  const posts = [
    { id: 1, title: "Post 1" },
    { id: 2, title: "Post 2" },
    { id: 3, title: "Post 3" },
  ];

  return {
    props: {
      posts,
    },
  };
}

 

📂 /out
 ├── index.html            # / 페이지
 ├── 📂 posts
 │   ├── 1.html            # /posts/1 페이지
 │   ├── 2.html            # /posts/2 페이지
 │   ├── 3.html            # /posts/3 페이지
 ├── 404.html              # 404 페이지 (존재하지 않는 페이지)
 ├── 📂 _next                 # JavaScript, CSS 등의 정적 파일
 │   ├── static
 │   │   ├── chunks
 │   │   ├── runtime
 │   │   ├── ...
 ├── asset-manifest.json
 ├── favicon.ico

 

 

---

 SSR (Server-Side Rendering)

요청이 올 때마다 서버에서 HTML을 실시간 생성하여 응답

Next.js의 getServerSideProps()가 대표적인 방식

 장점

• SEO 최적화 (검색 엔진이 HTML을 읽을 수 있음)
• 실시간 데이터 반영 가능 

단점

• 서버에서 렌더링할 때마다 응답 속도가 느려질 수 있음
• 서버 부하가 증가할 수 있음

 

SSR이 적합한 경우

 

최신 데이터를 항상 보여줘야 하는 경우 (예: 뉴스, 쇼핑몰, 대시보드)
검색 엔진 최적화가 필요한 경우

 

 

 

 

CSR vs SSG vs SSR 비교 정리

렌더링 방식	최초 로딩 속도	SEO데이터	최신성	서버 부하
CSR	느림	❌ (SEO 불리)	✅ 실시간	낮음
SSG	빠름	✅ (SEO 유리)	❌ 정적 데이터	매우 낮음
SSR	보통	✅ (SEO 유리)	✅ 최신 데이터	높음