01. SSR 전체 구조와 필요한 6가지 요소

┌─────────────────────────────────────────────────────────────┐
│                  SSR 6가지 필수 요소                         │
│                                                              │
│  ① 빌드 설정      서버용 + 클라이언트용 각각 빌드           │
│  ② Hydration      서버 HTML ↔ 클라이언트 JS 연결            │
│  ③ 코드 스플리팅   페이지별 JS 분리                         │
│  ④ 라우팅         서버 라우트 ↔ 클라이언트 라우트 동기화    │
│  ⑤ 데이터 페칭    서버 fetch → HTML 주입 → 클라이언트 재사용│
│  ⑥ HMR / 개발 서버 코드 수정 → 즉시 반영                   │
└─────────────────────────────────────────────────────────────┘

// build.js — esbuild 기반 이중 빌드
 
// 서버 번들 (Node.js에서 실행)
await esbuild.build({
  entryPoints: ['./server.js'],
  outfile: './dist/server.js',
  bundle: true,
  format: 'esm',
  platform: 'node',         // ← Node.js 환경
  packages: 'external',     // ← node_modules는 번들에 포함 안 함
  jsx: 'automatic',
});
 
// 클라이언트 번들 (브라우저에서 실행)
await esbuild.build({
  entryPoints: ['./client/react-entry.jsx'],
  outfile: './public/react-bundle.js',
  bundle: true,
  format: 'iife',           // ← 브라우저용 즉시 실행 함수
  platform: 'browser',      // ← 브라우저 환경
  jsx: 'automatic',
  minify: true,             // ← 용량 줄이기
});

                     HomePage.jsx
                    ┌─────────────┐
                    │ function     │
                    │ HomePage() { │
                    │   ...        │
                    │ }            │
                    └──────┬──────┘
                           │
              ┌────────────┴────────────┐
              ▼                         ▼
     서버 빌드 (esbuild)        클라이언트 빌드 (esbuild)
     platform: 'node'           platform: 'browser'
              │                         │
              ▼                         ▼
     dist/server.js              public/react-bundle.js
     renderToString() 호출       hydrateRoot() 호출

// entry-server.jsx — 서버 진입점
import React from 'react'
import { renderToString } from 'react-dom/server'
import HomePage from './HomePage.jsx'
 
export function render() {
  return renderToString(<HomePage />);
  // 결과: "<div class="container"><h1>안녕하세요</h1>..."
  // onClick? 없음. useState? 0으로 고정.
}

// entry-client.jsx — 클라이언트 진입점
import React from 'react'
import { hydrateRoot } from 'react-dom/client'
import HomePage from './HomePage.jsx'
 
// 서버가 보내준 HTML 위에 이벤트 핸들러를 연결
hydrateRoot(document.getElementById('root'), <HomePage />);
// 이제 onClick이 동작하고, useState가 상태 변경 가능

// 코드 스플리팅 없이 (현재 A003)
// react-bundle.js 하나에 모든 페이지 포함 → 300KB
 
// 코드 스플리팅 적용 후
// home-a1b2c3.js     → 30KB (홈페이지만)
// about-d4e5f6.js    → 25KB (어바웃만)
// dashboard-g7h8.js  → 80KB (대시보드만)

// React에서 코드 스플리팅 구현
import { lazy, Suspense } from 'react';
 
// 동적 import → 별도 번들로 분리
const HomePage = lazy(() => import('./pages/HomePage'));
const AboutPage = lazy(() => import('./pages/AboutPage'));
 
function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <Routes>
        <Route path="/" element={<HomePage />} />
        <Route path="/about" element={<AboutPage />} />
      </Routes>
    </Suspense>
  );
}

현재 (서버 라우팅만):
  사용자가 /about 클릭
  → 브라우저가 서버에 GET /about 요청
  → 서버가 HTML 새로 렌더링
  → 전체 페이지 새로고침 (화면 깜빡)
 
SPA 라우팅 추가 시:
  사용자가 /about 클릭
  → 클라이언트 JS가 URL만 변경
  → 해당 컴포넌트만 교체
  → 새로고침 없이 부드러운 전환

// server.js — 서버 라우팅
import { renderToString } from 'react-dom/server';
import { StaticRouter } from 'react-router-dom/server';
import App from './App.jsx';
 
app.get('*', (req, res) => {
  // 서버: 요청 URL을 StaticRouter에 전달
  const html = renderToString(
    <StaticRouter location={req.url}>
      <App />
    </StaticRouter>
  );
  res.send(`...${html}...`);
});

// entry-client.jsx — 클라이언트 라우팅
import { BrowserRouter } from 'react-router-dom';
import App from './App.jsx';
 
hydrateRoot(
  document.getElementById('root'),
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

// server.js — 서버에서 데이터 페칭
app.get('/dashboard', async (req, res) => {
  // 1. 서버에서 API 호출
  const data = await fetch('https://api.example.com/stats').then(r => r.json());
 
  // 2. 데이터를 포함하여 렌더링
  const html = renderToString(<Dashboard initialData={data} />);
 
  // 3. 데이터를 HTML에 직접 삽입 (클라이언트 재사용용)
  res.send(`<!DOCTYPE html>
<html>
<body>
  <div id="root">${html}</div>
 
  <!-- 서버 데이터를 전역 변수로 전달 -->
  <script>
    window.__INITIAL_DATA__ = ${JSON.stringify(data)}
  </script>
 
  <script src="/bundle.js"></script>
</body>
</html>`);
});

// entry-client.jsx — 클라이언트에서 데이터 재사용
const initialData = window.__INITIAL_DATA__; // 서버가 삽입한 데이터
 
hydrateRoot(
  document.getElementById('root'),
  <Dashboard initialData={initialData} />
  // API를 다시 호출하지 않고 서버 데이터를 그대로 사용
);

서버 데이터 페칭 흐름:
 
[서버]                         [브라우저]
  │                               │
  │  1. API 호출                  │
  │  fetch('/api/stats')          │
  │  data = { visits: 1234 }      │
  │                               │
  │  2. HTML 렌더링               │
  │  renderToString(              │
  │    <Dashboard data={data} />  │
  │  )                            │
  │                               │
  │  3. HTML + 데이터 전송        │
  │  ─────────────────────────►   │
  │  <div>방문자: 1234</div>      │
  │  window.__INITIAL_DATA__      │
  │    = { visits: 1234 }         │
  │                               │
  │                      4. hydration
  │                      initialData =
  │                        window.__INITIAL_DATA__
  │                      hydrateRoot(
  │                        <Dashboard data={initialData} />
  │                      )
  │                      → API 재호출 없음!

// vite.config.js — Vite 개발 서버 설정 (자동 HMR)
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
 
export default defineConfig({
  plugins: [react()],
  server: {
    port: 3000,
    // HMR은 기본 활성화. 코드 수정 → 즉시 반영
  }
})

// 직접 HMR을 구현하려면? (Webpack 예시)
if (module.hot) {
  module.hot.accept('./App', () => {
    // 변경된 App 모듈만 다시 렌더링
    const NextApp = require('./App').default;
    render(<NextApp />);
  });
}

일반 CSR의 HMR:
  코드 수정 → 클라이언트 모듈만 교체 → 끝
 
SSR의 HMR:
  코드 수정 → 클라이언트 모듈 교체 + 서버 번들 다시 빌드
            → 서버 모듈 캐시 무효화
            → 다음 요청에서 새 서버 코드 반영

Express SSR = "집을 직접 짓기"
  기초 공사, 배관, 전기, 단열, 지붕... 전부 직접
 
Next.js = "아파트 분양"
  입주만 하면 됨. 배관, 전기, 단열은 이미 완료

// Next.js에서 같은 작업을 하면:
 
// pages/index.js (빌드 + 라우팅 + 코드 스플리팅 자동)
export default function HomePage({ data }) {
  const [count, setCount] = useState(0);
  return (
    <div>
      <h1>방문자 수: {data.visits}</h1>
      <button onClick={() => setCount(count + 1)}>+1</button>
    </div>
  );
}
 
// 데이터 페칭 (서버 → 클라이언트 전달 자동)
export async function getServerSideProps() {
  const data = await fetch('https://api.example.com/stats').then(r => r.json());
  return { props: { data } };
}
 
// Hydration? 자동.
// HMR? next dev로 자동.
// 빌드? next build로 자동.

프레임워크를 모르고 쓰는 개발자:
  "왜 안 되지?" → Stack Overflow 복붙 → "되긴 되는데 왜 되는지 모르겠다"
 
원리를 이해한 개발자:
  "Hydration 불일치네" → "서버에서 Date.now() 때문이군" → 직접 수정