1-pager

[핵심 1] 본질 = 서버에서 HTML 형태로 응답을 만들어 보내요 │ ├─→ 0장: 시작하기 │ └─ 독자의 고통 공감 ("이 코드 어디서 실행되는 거야?") │ └─ 문서의 약속 (읽고 나면 스스로 답할 수 있다) │ ├─→ 1장: 어떻게 여기까지 왔나 (역사 = 맥락) │ ├─ 서버만 (PHP 시대) — 경계 없음, 단순 │ ├─ 클라만 (SPA) — 인터랙션 좋음, SEO/초기로딩 문제 │ └─ 둘 다 (현재) — 경계 발생 → 복잡성의 시작 │ └─→ 2장: SSR의 본질 (최소 구현) ├─ Express + 문자열 조합 — "이게 SSR이야?" ├─ React + renderToString — "React도 결국 문자열" └─ 정리: "서버에서 HTML 형태로 응답을 만들어 보내요 - 이게 전부예요" │ [핵심 2] 문제 → 해결책 (질문이 생기면 붙인다) │ └─→ 3장: 살 붙이기 │ ├─ 3-1: 라우팅 │ └─ 문제: URL이 여러 개면? │ └─ 해결: 파일 기반 라우터 │ ├─ 3-2: 데이터 페칭 │ └─ 문제: HTML 만들 때 데이터 필요하면? │ └─ 해결: getServerSideProps │ └─ 제약: 반환값은 직렬화 가능해야 함 │ ├─ 3-3: Hydration │ └─ 문제: 클라이언트 인터랙션도 필요하면? │ └─ 해결: hydrate로 이벤트 연결 │ └─ 제약: 함수는 직렬화 불가 → 클라에서 재연결 │ └─ 함정: Hydration Mismatch │ ├─ 3-4: 코드 스플리팅 │ └─ 문제: JS 번들이 커지면? │ └─ 해결: dynamic import │ ├─ 3-5: 이미지 프로세싱 │ └─ 문제: 이미지가 무거우면? │ └─ 해결: next/image │ └─ 3-6: 사전 렌더링 └─ 문제: 매번 새로 만들어야 해? └─ 해결: SSG (빌드 타임), ISR (주기적 재생성) │ [핵심 3] 프레임워크 = 해결책들의 추상화 │ └─→ 4장: 프레임워크가 해주는 것들 ├─ 3장에서 붙인 것들의 정리 ├─ "이걸 매번 직접 만들기 귀찮으니까 추상화" └─ Next.js, Remix, Nuxt = 같은 문제를 푸는 도구들 │ [심화] 더 고도화된 해결책들 │ └─→ 5장: 심화 (2차 릴리즈) │ ├─ 5-1: 직렬화 │ └─ 근본 제약을 깊이 다룸 │ └─ JSON.stringify의 한계 │ └─ SSR에서 직렬화가 일어나는 모든 지점 │ ├─ 5-2: Streaming SSR │ └─ 문제: 느린 데이터 때문에 전체 대기 │ └─ 해결: 준비된 부분부터 보냄 (Fizz) │ └─ 제약: renderToString이 동기 함수 │ ├─ 5-3: React Server Components │ └─ 문제: 서버 전용 코드가 번들에 포함 │ └─ 해결: 서버에서만 실행되는 컴포넌트 │ └─ 제약: 동형 컴포넌트의 한계 │ └─ 5-4: Edge Computing └─ CDN에서 렌더링

서버만 (PHP 시대) ↓ 브라우저가 강해짐 클라만 (SPA) ↓ SEO, 초기 로딩 문제 다시 서버로, 근데 둘 다 ↓ 경계가 생김 → 오늘날의 복잡성

본질 이해 → 문제 만남 → 해결책 붙임 → 프레임워크 도달 2장 3장 4장 5장