05. entry-server.jsx와 entry-client.jsx

┌─────────────────────────────────────────────────────┐
│                  HomePage.jsx                        │
│                                                      │
│  export default function HomePage() {                │
│    const [count, setCount] = useState(0);            │
│    return (                                          │
│      <div className="container">                     │
│        <h1>안녕하세요</h1>                            │
│        <p>방문자 수: {count}</p>                      │
│        <button onClick={() => setCount(count+1)}>    │
│          +1                                          │
│        </button>                                     │
│      </div>                                          │
│    );                                                │
│  }                                                   │
└──────────────────────┬──────────────────────────────┘
                       │
          ┌────────────┴────────────┐
          ▼                         ▼
  entry-server.jsx           entry-client.jsx
  (Node.js에서 실행)          (브라우저에서 실행)
          │                         │
          ▼                         ▼
  renderToString()            hydrateRoot()
  HTML 문자열 생성             이벤트 핸들러 연결

// entry-server.jsx (A003 프로젝트)
import React from 'react'
import { renderToString } from 'react-dom/server'
import HomePage from './HomePage.jsx'
 
export function render() {
  return renderToString(<HomePage />);
}

entry-server.jsx가 하는 일:
 
  1. 'react-dom/server'에서 renderToString을 가져온다
     (이 모듈은 서버 전용 — 브라우저에서는 사용 불가)
 
  2. HomePage 컴포넌트를 import한다
 
  3. render() 함수를 export한다
     이 함수를 호출하면 HomePage의 HTML 문자열을 반환
 
  4. 이 함수는 server.js(또는 test.js)에서 호출됨:
     const { render } = await import('./dist/server/entry-server.js');
     const appHtml = render();

// entry-client.jsx (A003 프로젝트)
import React from 'react'
import { hydrateRoot } from 'react-dom/client'
import HomePage from './HomePage.jsx'
 
hydrateRoot(document.getElementById('root'), <HomePage />);

entry-client.jsx가 하는 일:
 
  1. 'react-dom/client'에서 hydrateRoot를 가져온다
     (이 모듈은 브라우저 전용 — document.getElementById가 필요)
 
  2. 같은 HomePage 컴포넌트를 import한다
 
  3. document.getElementById('root')로 서버가 보낸 HTML 영역을 찾는다
 
  4. hydrateRoot()로 그 HTML에 이벤트 핸들러를 연결한다

// 이렇게 합치면? (잘못된 접근)
import { renderToString } from 'react-dom/server';  // 서버 전용
import { hydrateRoot } from 'react-dom/client';      // 브라우저 전용
import HomePage from './HomePage.jsx';
 
if (typeof window === 'undefined') {
  // 서버
  export function render() {
    return renderToString(<HomePage />);
  }
} else {
  // 브라우저
  hydrateRoot(document.getElementById('root'), <HomePage />);
}

왜 안 되는가:
 
1. 번들 크기 문제
   브라우저 빌드에 react-dom/server가 포함됨 (불필요한 코드)
   서버 빌드에 react-dom/client가 포함됨 (불필요한 코드)
 
2. Tree-shaking 실패
   조건문 안의 import는 빌드 도구가 제거하기 어려움
   → 번들에 불필요한 코드가 남음
 
3. 정적 분석 불가
   빌드 도구는 "이 파일은 서버용"/"이 파일은 클라이언트용"을
   명확히 알아야 최적화 가능
   → 하나의 파일에 섞으면 최적화 불가
 
4. 가독성
   서버 코드와 클라이언트 코드의 관심사가 다름
   → 분리하는 게 유지보수에 유리

// 이 코드를 브라우저에서 바로 실행하면:
hydrateRoot(document.getElementById('root'), <HomePage />);
 
// 브라우저:
// SyntaxError: Unexpected token '<'
// "< 이게 뭔데? JavaScript에 < 다음에 태그명이 올 수 없어!"

브라우저가 이해하는 것:
  ✅ const x = 1;
  ✅ function foo() {}
  ✅ document.getElementById('root')
  ✅ React.createElement('div', null, 'hello')
 
브라우저가 이해하지 못하는 것:
  ❌ <div>hello</div>         ← JavaScript가 아님!
  ❌ <HomePage />              ← JavaScript가 아님!
  ❌ <button onClick={fn}>     ← JavaScript가 아님!

빌드 전 (개발자가 작성한 코드):
 
  <div className="container">
    <h1>안녕하세요</h1>
    <button onClick={() => setCount(count + 1)}>+1</button>
  </div>
 
빌드 후 (브라우저가 실행하는 코드):
 
  React.createElement('div', { className: 'container' },
    React.createElement('h1', null, '안녕하세요'),
    React.createElement('button', { onClick: () => setCount(count + 1) }, '+1')
  )

JSX 변환 과정:
 
  개발자 코드 (.jsx)
       │
       ▼
  [빌드 도구: Vite / esbuild / Babel]
       │  JSX → React.createElement() 변환
       │  import/export → 번들링
       │  최소화(minify)
       ▼
  브라우저용 번들 (.js)
       │
       ▼
  브라우저에서 실행 가능!

// build.js에서 JSX 변환 설정
await esbuild.build({
  entryPoints: ['./client/react-entry.jsx'],
  outfile: './public/react-bundle.js',
  bundle: true,
  jsx: 'automatic',         // ← JSX를 자동으로 React.createElement로 변환
  jsxImportSource: 'react', // ← React의 jsx 함수를 사용
});

jsx: 'automatic' 옵션의 의미:
 
  'automatic' (React 17+):
    import { jsx as _jsx } from 'react/jsx-runtime';
    _jsx('div', { className: 'container', children: ... })
 
  'transform' (React 16 이하):
    React.createElement('div', { className: 'container' }, ...)
 
  두 방식 모두 같은 결과. 'automatic'이 최신 방식.

// JSX 버전 — 개발자가 작성하기 편한 형태
function HomePage() {
  return (
    <div className="container">
      <h1>안녕하세요</h1>
      <p>방문자 수: {count}</p>
    </div>
  );
}
 
// React.createElement 버전 — 100% 동일한 코드
function HomePage() {
  return React.createElement('div', { className: 'container' },
    React.createElement('h1', null, '안녕하세요'),
    React.createElement('p', null, '방문자 수: ', count)
  );
}

syntactic sugar의 다른 예시:
 
  JavaScript에서:
    const { name, age } = person;
    // sugar for:
    const name = person.name;
    const age = person.age;
 
  JSX에서:
    <h1>안녕</h1>
    // sugar for:
    React.createElement('h1', null, '안녕')
 
  보기 좋게 쓰지만, 실제 동작은 변환된 코드가 한다.

시스템 A (esbuild 기반):
 
  client/react-entry.jsx  ──[esbuild]──→  public/react-bundle.js
  (브라우저 진입점)                        (브라우저가 다운로드)
 
  server.js              ──[esbuild]──→  dist/server.js
  (서버 진입점)                           (Node.js가 실행)
  (server.js 내부에서 직접 renderToString 호출)
 
 
시스템 B (Vite 기반):
 
  entry-client.jsx  ──[vite build]──→  dist/client/assets/entry-client-D6usOwnO.js
  (브라우저 진입점)                     (브라우저가 다운로드)
 
  entry-server.jsx  ──[vite build --ssr]──→  dist/server/entry-server.js
  (서버 진입점)                               (test.js에서 import하여 사용)

시스템 A vs 시스템 B의 entry 구조 차이:
 
시스템 A (esbuild):
  서버 진입점이 server.js 자체에 통합됨
  server.js가 직접 renderToString 호출
  → entry-server가 별도 파일로 분리되지 않음
 
시스템 B (Vite):
  entry-server.jsx가 명확히 분리됨
  render() 함수를 export하고, test.js에서 import하여 호출
  → 관심사가 깔끔하게 분리됨

{
  "scripts": {
    "build:client": "vite build --outDir dist/client",
    "build:server": "vite build --outDir dist/server --ssr entry-server.jsx"
  }
}

vite build --outDir dist/client
  → vite.config.js의 rollupOptions.input을 사용 (entry-client.jsx)
  → 브라우저용 번들 생성
  → manifest.json 생성
 
vite build --outDir dist/server --ssr entry-server.jsx
  → --ssr 플래그: "이 파일은 서버용으로 빌드해"
  → Node.js용 번들 생성 (external 처리 등)
  → entry-server.jsx의 export function render()를 보존