2nd/10_Wiki/Topics/Frontend/Client-Side Rendering (CSR).md

id, title, category, status, canonical_id, aliases, duplicate_of, source_trust_level, confidence_score, verification_status, tags, raw_sources, last_reinforced, github_commit, tech_stack

id	title	category	status	canonical_id	aliases	duplicate_of	source_trust_level	confidence_score	verification_status	tags	raw_sources	last_reinforced	github_commit	tech_stack
wiki-2026-0508-client-side-rendering-csr	Client-Side Rendering (CSR)	10_Wiki/Topics	verified	self	CSR SPA Rendering	none	A	0.9	applied	rendering csr spa frontend performance		2026-05-10	pending	language framework TypeScript React / Vue / Svelte

Client-Side Rendering (CSR)

매 한 줄

"매 browser 가 매 HTML 을 그린다". CSR 은 server 가 빈 shell + JS bundle 만 보내고, browser 가 fetch + render 모두 수행 — 매 SPA 의 default mode, interactive app 에 강하나 매 first paint / SEO 매 weak.

매 핵심

매 lifecycle

1. Browser → server: GET / → minimal HTML + <script src="bundle.js">.
2. Browser parses HTML → fetches JS bundle.
3. JS executes → mounts framework → fetches data → renders DOM.
4. User interacts.

매 trade-off

Pros	Cons
Rich interactivity	Slow TTI (특히 mobile)
Server cost low	SEO 매 needs hydration tricks
Client routing fast	Blank screen until JS loads
Offline-capable (PWA)	Bundle size matters a lot

매 CSR vs SSR vs RSC (2026)

• CSR: dashboard, internal tool, app-like UX.
• SSR: marketing, blog, e-commerce.
• RSC: hybrid — server-render with client islands.
• SSG: docs, blog (rebuild on content change).

💻 패턴

Vite + React CSR baseline

// main.tsx
import { createRoot } from 'react-dom/client';
import App from './App';

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

<!-- index.html -->
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>

Route-based code splitting

import { lazy, Suspense } from 'react';
import { Routes, Route } from 'react-router';

const Dashboard = lazy(() => import('./Dashboard'));
const Settings = lazy(() => import('./Settings'));

export default function App() {
  return (
    <Suspense fallback={<Spinner />}>
      <Routes>
        <Route path="/dashboard" element={<Dashboard />} />
        <Route path="/settings" element={<Settings />} />
      </Routes>
    </Suspense>
  );
}

Skeleton-first paint (perceived perf)

function UsersList() {
  const { data, isLoading } = useQuery({ queryKey: ['users'], queryFn: fetchUsers });
  if (isLoading) return <UsersSkeleton rows={10} />;
  return <ul>{data!.map((u) => <li key={u.id}>{u.name}</li>)}</ul>;
}

Pre-fetch on hover (link prefetch)

<Link
  to="/dashboard"
  onMouseEnter={() => queryClient.prefetchQuery({ queryKey: ['dashboardData'], queryFn })}
>
  Dashboard
</Link>

Service Worker for offline shell

// sw.ts
self.addEventListener('install', (e: any) => {
  e.waitUntil(caches.open('shell-v1').then((c) => c.addAll(['/', '/main.js', '/main.css'])));
});
self.addEventListener('fetch', (e: any) => {
  e.respondWith(caches.match(e.request).then((r) => r ?? fetch(e.request)));
});

Bundle budget enforcement

// vite.config.ts
export default {
  build: {
    rollupOptions: {
      output: {
        manualChunks: { vendor: ['react', 'react-dom'] },
      },
    },
    chunkSizeWarningLimit: 200, // KB
  },
};

SEO via prerender (when CSR + needed)

# Use prerender for marketing routes only
npx prerender-spa-plugin --routes /,/about,/pricing

매 결정 기준

상황	Render mode
Auth-walled dashboard	CSR
Marketing site	SSG or SSR
Mixed app (e-commerce)	RSC / SSR + islands
Rich realtime (Figma-like)	CSR + WebSocket

기본값: 매 user-app (login wall 뒤) → CSR. 매 public content → SSR/SSG/RSC.

🔗 Graph

• 부모: Rendering-Strategies · 프론트엔드 및 UIUX 표준
• 변형: React Server Components — 경계 의식
• Adjacent: Core Web Vitals Optimization (INP, LCP, CLS) · Code Splitting · Hydration

🤖 LLM 활용

언제: app-like UX, auth-protected, heavy client interactivity. 언제 X: 매 SEO-critical public page, low-end device 가 주 audience.

❌ 안티패턴

• Mega-bundle: 매 single chunk 5MB → split routes / vendor.
• No skeleton / loading state: 매 blank screen 매 perceived as broken.
• CSR for blog/docs: 매 SEO/perf 매 모두 lose — SSG choice.

🧪 검증 / 중복

• Verified (web.dev / React docs / Vite docs).
• 신뢰도 A.

🕓 Changelog

날짜	변경
2026-05-08	Phase 1
2026-05-10	Manual cleanup — CSR fundamentals + tradeoffs + patterns