Files

T

Antigravity Agent f8b21af4be Wiki cleanup: error-doc removal, dedup merge, link normalization

10_Wiki/Topics 대규모 정리:
- 오류 캡처/미완성 stub 문서 227개 제거
- 교차폴더 중복 43클러스터 병합 (63파일 → redirect)
- 링크명 정규화: 깨진 링크 수정·redirect 직결·개념 매핑 ~2,400건
- 카테고리 MOC 6개 신규 생성
- Graph 섹션 미해결 related-keyword 링크 10,058건 제거

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

2026-05-20 23:52:15 +09:00

4.6 KiB

Raw Blame History

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

title

Client-Side Rendering (CSR)

매 한 줄

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

매 핵심

매 lifecycle

Browser → server: GET / → minimal HTML + <script src="bundle.js">.
Browser parses HTML → fetches JS bundle.
JS executes → mounts framework → fetches data → renders DOM.
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 개선) · 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

4.6 KiB Raw Blame History