React Router v7 Framework - Rendering Strategies

React Router에서는 CSR(Client Side Rendering), SSR(Server Side Rendering), Static Pre-rendering을 지원한다. 각각의 특징과 사용법을 살펴보자.

Client Side Rendering

초기 로드 후, 모든 라우팅과 데이터 로딩을 클라이언트에서 처리한다.

SPA(Single Page Application)를 만들 때 사용한다.

특징

• 초기 로딩 시, 빈 HTML + JavaScript 번들만 받아온다.
• 이후 라우팅은 클라이언트에서만 처리 (페이지 새로고침 없음).
• SEO에 불리하지만, 빠른 페이지 전환이 가능.

사용법

import type { Config } from "@react-router/dev/config";

export default {
  ssr: false, // 서버 사이드 렌더링 비활성화
} satisfies Config;

---

Server Side Rendering

페이지를 요청할 때마다 서버에서 HTML을 생성해 클라이언트에 전달한다.

특징

• 첫 페이지 로딩 속도가 빠름 (SEO에 유리).
• 클라이언트에 도달하기 전, 완성된 HTML을 받음.
• 서버 인프라가 필요.

사용법

import type { Config } from "@react-router/dev/config";

export default {
  ssr: true, // 서버 사이드 렌더링 활성화
} satisfies Config;

💡 추가 팁

• SSR을 사용해도 clientLoader를 통해 클라이언트 측 데이터 로딩 가능.
• 일부 라우트는 정적 프리렌더링(Static Pre-rendering)으로 처리 가능.

---

Static Pre-rendering

빌드 시점에 미리 HTML을 생성해 정적으로 호스팅한다.

SEO 최적화와 빠른 로딩 속도를 위해 사용된다.

특징

• 서버 필요 없음 (정적 사이트 호스팅 가능, 예: GitHub Pages, Netlify).
• 특정 경로만 선택적으로 프리렌더링 가능.
• *정적 사이트 생성기(SSG)**처럼 동작.

사용법

import type { Config } from "@react-router/dev/config";

export default {
  async prerender() {
    return ["/", "/about", "/contact"]; // 빌드 시 미리 렌더링할 경로 목록
  },
} satisfies Config;

• 빌드 시점에 "/", "/about", "/contact" 페이지를 정적 HTML로 생성.
• SEO 최적화와 정적 페이지 제공에 유리.

---

렌더링 방식 비교

	CSR	SSR	Static Pre-rendering
🌐 SEO	❌ 불리	✅ 유리	✅ 매우 유리
⚡ 첫 페이지 로딩 속도	느림	빠름	매우 빠름
🔁 페이지 전환 속도	빠름	느림 (서버 호출)	빠름
💾 서버 필요 여부	❌	✅	❌
🏗️ 빌드 타임 데이터	불가	불가	가능
🔄 실시간 데이터	가능	가능	불가

---

🎯 언제 어떤 방식을 사용할까?

• 🛍️ 쇼핑몰/블로그 등 SEO 중요한 서비스 → SSR 또는 Static Pre-rendering
• ⚡ SPA, 대시보드 등 인터랙티브 앱 → CSR
• 📖 정적 정보성 페이지 → Static Pre-rendering

💡 Tip:

• 필요에 따라 CSR + Static Pre-rendering을 조합하거나,
• 일부 페이지만 SSR로 처리할 수 있다.