CSR, SSR, SSG, ISR, RSC 렌더링 전략

// [요청] 브라우저 → 서버: 페이지 요청
// [응답] 서버 → 브라우저: 빈 HTML + bundle.js
// [처리] 브라우저: JS 실행 → React가 DOM 생성
// [출력] 완성된 화면 표시 + 인터랙션 가능
 
// index.html에는 <div id="root"></div>만 있고
// bundle.js가 로드되면서 React가 DOM을 채움

// [요청] 브라우저 → 서버: /product/123 요청
// [처리] 서버: DB 조회 → HTML 완성
// [응답] 완성된 HTML → 브라우저에서 즉시 표시
// [Hydration] JS 로드 후 → 인터랙션 활성화
 
// Next.js Pages Router 기준
export async function getServerSideProps(context) {
  // [입력] 요청마다 실행, context에서 params/cookies 접근 가능
  const res = await fetch(`https://api.example.com/product/${context.params.id}`);
  const product = await res.json();
 
  // [출력] props로 컴포넌트에 전달
  return { props: { product } };
}

// [빌드 타임] 서버: 데이터 fetch → HTML 파일 생성 → 저장
// [요청] 브라우저 → CDN: 페이지 요청
// [응답] CDN → 브라우저: 미리 만들어둔 HTML 즉시 반환
// [Hydration] JS 로드 후 → 인터랙션 활성화
 
export async function getStaticProps() {
  // [입력] 빌드 타임에 단 한 번만 실행
  const res = await fetch('https://api.example.com/posts');
  const posts = await res.json();
 
  // [출력] 빌드된 HTML에 데이터 포함
  return { props: { posts } };
}

// 1. 최초 빌드 → 정적 HTML 생성 + 캐싱
// 2. revalidate 시간 내 요청 → 캐시 그대로 응답
// 3. revalidate 시간 초과 후 첫 요청
//    → 오래된 캐시 즉시 응답 (UX 유지)
//    → 백그라운드에서 새 HTML 생성 시작
// 4. 재생성 완료 → 이후 요청부터 새 페이지 제공
 
export async function getStaticProps() {
  const res = await fetch('https://api.example.com/news');
  const news = await res.json();
 
  return {
    props: { news },
    revalidate: 60, // [핵심] 60초마다 백그라운드 재생성
  };
}

// ❌ 기존 방식: 서버에서 HTML 생성하지만 라이브러리도 클라이언트 번들에 포함됨
// bundle.js에 marked, sanitize-html 전부 포함 → 번들 비대화
 
import marked from 'marked';
import sanitizeHtml from 'sanitize-html';
 
function Page({ page }) {
  const [content, setContent] = useState('');
  // [처리] 렌더 후, fetch로 데이터를 불러옴 → 추가 네트워크 왕복 발생
  useEffect(() => {
    fetch(`/api/content/${page}`).then((data) => {
      setContent(data.content);
    });
  }, [page]);
 
  return <div>{sanitizeHtml(marked(content))}</div>;
}

// ✅ RSC 방식: 서버 전용 컴포넌트
// 'use client' 없으면 기본이 Server Component (App Router 기준)
 
// [처리] 서버에서만 실행 → 아래 라이브러리는 클라이언트 번들에 포함되지 않음
import marked from 'marked';
import sanitizeHtml from 'sanitize-html';
 
async function Page({ page }) {
  // [입력] 서버에서 직접 파일/DB 접근 가능 → fetch 왕복 없음
  const content = await readFile(`posts/${page}.md`);
 
  // [출력] 완성된 HTML 구조로 반환
  return <div>{sanitizeHtml(marked(content))}</div>;
}

페이지에 실시간 데이터가 필요한가?
├── YES → 로그인/개인화 데이터인가?
│         ├── YES → SSR 또는 RSC (App Router 권장)
│         └── NO  → SSR (커머스, 뉴스)
│
└── NO  → 콘텐츠가 주기적으로 바뀌는가?
           ├── YES → ISR (갱신 주기 설정)
           └── NO  → SEO가 필요한가?
                      ├── YES → SSG (블로그, 랜딩페이지)
                      └── NO  → CSR (어드민, 대시보드)