# 노션 DB → 웹사이트 자동 동기화 (ISR)

> 노션에 작성한 콘텐츠가 웹사이트에 자동 반영되는 실시간 동기화 시스템

- Canonical: https://heyratty.io/portfolio/notion-website-sync-isr
- Category: 웹 개발, 업무 자동화
- Client: B2B 기업
- Period: 2026.03
- Tech: Next.js, Notion API, ISR, Vercel, TypeScript
- Before → After: CMS 로그인 → 노션 편집

## Challenge
노션 데이터베이스에 콘텐츠를 작성하면, 웹사이트에 자동으로 반영되는 동기화 시스템입니다.

## Solution
ISR(Incremental Static Regeneration) 기술로 빠른 로딩 속도를 유지하면서도, 노션 업데이트가 웹사이트에 자동 반영됩니다.

## Features
- **노션 기반 CMS** — 별도 관리자 페이지 없이 노션에서 직접 콘텐츠를 관리합니다.
- **ISR 자동 재빌드** — 전체 사이트 재배포 없이 변경된 페이지만 빠르게 업데이트합니다.
- **SEO 최적화** — 정적 페이지 생성으로 검색 엔진 최적화와 빠른 로딩 속도를 동시에 확보합니다.
- **이미지 자동 최적화** — 노션에 업로드된 이미지를 웹 최적 포맷으로 자동 변환합니다.

## Flow
1. **콘텐츠 작성 입력** — "포트폴리오 새 프로젝트 추가했어"
2. **자동 감지·재빌드** — 변경된 페이지만 선택적으로 업데이트
3. **웹사이트 자동 반영** — CDN 배포까지 자동 처리

## Results
- 노션 편집 하나로 즉시 배포: 콘텐츠 업데이트
- 페이지 로딩 속도: 정적 생성으로 1초 이내
- 마케팅팀 자체 운영: 개발자 없이 콘텐츠 업데이트 가능
- SEO 점수 향상: 정적 페이지 + 메타데이터 자동 생성

## Contact
- Email: contact@heyratty.io
- Website: https://heyratty.io