○ Static vs ƒ Dynamic

Route (app)                Revalidate  Expire
┌ ○ /
├ ○ /isr                           1m      1y
├ ○ /ssr
└ ƒ /search

○  (Static)   prerendered as static content
ƒ  (Dynamic)  server-rendered on demand

next build
  └─ 페이지 컴포넌트 실행 → 데이터 조회 → HTML 생성 → .next/server/app/xxx.html 저장

요청
  └─ 저장된 HTML을 그대로 응답 (컴포넌트를 다시 실행하지 않음)

next build
  └─ 페이지 코드만 준비 (HTML은 만들지 않음)

요청
  └─ 페이지 컴포넌트 실행 → 데이터 조회 → HTML 생성 → 응답

flowchart TD
    Start([next build가 페이지를 검사]) --> Q1{"cookies() · headers()<br/>searchParams · connection()<br/>를 쓰나?"}
    Q1 -- 예 --> D["ƒ Dynamic<br/>요청마다 렌더링"]
    Q1 -- 아니요 --> Q2{"fetch에 cache: 'no-store'<br/>또는 dynamic = 'force-dynamic'?"}
    Q2 -- 예 --> D
    Q2 -- 아니요 --> Q3{"revalidate 설정이 있나?"}
    Q3 -- 예 --> I["○ Static + Revalidate<br/>ISR"]
    Q3 -- 아니요 --> S["○ Static<br/>빌드 때 1회 생성"]

    classDef dyn fill:#fca5a5,stroke:#b91c1c,color:#000
    classDef sta fill:#93c5fd,stroke:#1d4ed8,color:#000
    classDef isr fill:#86efac,stroke:#15803d,color:#000
    class D dyn
    class S sta
    class I isr

// app/ssr/page.tsx → SsrList를 렌더링
export default async function SsrList() {
  const response = await fetch('https://jsonplaceholder.typicode.com/posts');
  const items = await response.json();

  await delay(5000); // 5초 대기

  return <ul>{items.map((item) => <li key={item.id}>{item.title}</li>)}</ul>;
}

├ ○ /ssr

import { Suspense } from 'react';

export default function SsrPage() {
  return (
    <div>
      <h1>SSR Page</h1>                       {/* 바로 보임 */}
      <Suspense fallback={<p>불러오는 중...</p>}>
        <SsrList />                           {/* 5초 뒤에 채워짐 */}
      </Suspense>
    </div>
  );
}

sequenceDiagram
    participant B as 브라우저
    participant S as Next.js 서버

    B->>S: /ssr 요청
    S-->>B: 제목 + "불러오는 중..." (즉시)
    Note over S: SsrList 5초 대기
    S-->>B: 목록 HTML (5초 뒤 이어서 전송)

export default function Page() {
  return <p>렌더링 시각: {new Date().toLocaleTimeString()}</p>;
}