성능 최적화 전략

데이터 페칭 최적화

  • 서버 컴포넌트 렌더링 중 동일한 요청은 캐시에서 반환
  • Notion API 호출 횟수 대폭 감소
  • 요청 생명주기(Request Lifecycle) 동안 메모이제이션

    • Promise.all 병렬 처리

    ISR 설정

    동작 원리

  • 첫 요청: 서버에서 페이지 생성 → HTML 캐시
  • 10분 이내: 캐시된 정적 페이지 즉시 반환
  • 10분 후 첫 요청: 캐시 제공 + 백그라운드 재생성
  • 재생성 완료: 새 캐시로 교체

    • 장점

  • 정적 사이트의 빠른 속도
  • Notion 콘텐츠 변경사항 자동 반영
  • 서버 부하 최소화

    • 클라이언트 사이드 최적화

    검색 기능 메모이제이션

    효과

  • 재귀적 페이지 트리 평탄화 한 번만 계산
  • 검색 입력 시 불필요한 재계산 방지
  • 의존성(posts) 변경 시에만 재실행

    • 코드 스플리팅

    ‘use client’로 클라이언트 컴포넌트 분리

    장점

  • 초기 JS 번들 크기 감소
  • 필요한 컴포넌트만 클라이언트 하이드레이션

    • Shiki 동적 로딩

    효과

  • Shiki 라이브러리는 코드 블록이 있을 때만 로드
  • 초기 번들 크기 절감
  • 필요 시점(useEffect)에 비동기 실행