← 스터디로 돌아가기
Server Rendering 데모
Next.js는 라우트를 서버에서 렌더링합니다. Static 라우트는 빌드 시, Dynamic 라우트는 매 요청 시 렌더링됩니다. 아래 두 페이지를 방문하면서 타임스탬프 차이를 비교해보세요.
파일 구조
server-rendering/
├── page.tsx ← 현재 페이지
├── static-page/
│ └── page.tsx ← Static rendering (빌드 시 렌더링)
└── dynamic-page/
└── page.tsx ← Dynamic rendering (요청 시 렌더링)Static Rendering
- • 빌드 시 HTML 생성
- • CDN에 캐시 가능
- • 새로고침해도 타임스탬프 동일
- • 기본 렌더링 방식
Dynamic Rendering
- •
force-dynamic또는 동적 API 사용 - • 매 요청마다 서버에서 렌더링
- • 새로고침하면 타임스탬프 변경
- • cookies(), headers() 등 사용 시 자동 전환
체험 포인트: 두 페이지를 번갈아 방문하면서 타임스탬프를 비교하세요. Static 페이지는 빌드 시 고정된 시각을, Dynamic 페이지는 방문할 때마다 바뀌는 시각을 표시합니다.
핵심 파일 코드
// demo/nextjs/16.1.6/linking-and-navigating/server-rendering/page.tsx
export default function Page() {
// 핵심 동작: 실제 파일 구조와 런타임 결과를 함께 확인
}