Notion API 속도

문제 상황

Notion API를 사용해 데이터를 받아 출력하는 부분 로딩이 너무 오래걸림

원인

경로를 재귀적으로 탐색하는 구조

  • 라우팅: /blog/[...slug]
  • URL: /blog/project/notion-blog-제작
  • 방식: 제목을 slug로 변환 후 재귀적 경로 탐색
  • 과도한 API 호출

  • Blog 루트 페이지 조회 (API 호출 1회)
  • 첫 번째 경로 매칭 (project)
  • 해당 페이지의 자식 조회 (API 호출 2회)
  • 두 번째 경로 매칭 (notion-blog-제작)
  • 반복... (경로 깊이만큼 누적)
  • URL 인코딩 문제

  • 제목: Next.js + Notion Blog 제작
  • 변환: /blog/project/next-js-notion-blog-제작
  • 브라우저: /blog/project/next-js-notion-blog-%E1%84%8C%E1%85%A6%E1%84%8C%E1%85%A1%E1%86%A8
  • slug 매칭 시 디코딩 필요 → 복잡성 증가
  • 해결 방법

    재귀적 경로 탐색을 ID 기반 탐색으로 변경

    제목 기반 → ID 기반 라우팅

    Before (제목 기반):

  • /blog/project/notion-blog-제작
  • ↓ (경로 파싱 및 매칭)
  • ↓ (API 호출: 1회, 2회, 3회...)
  • ↓ (리소스 낭비)
  • After (ID 기반):

  • /blog/2bb2f60962d980f6be79cdef701778dc
  • ↓ (직접 페이지 조회)
  • ↓ (API 호출: 1회)
  • ↓ (효율적)
  • 파일 구조 변경

    Before:

    src/app/blog/

    ├── [...slug]/

    │ └── page.tsx (다단계 경로 처리)

    └── page.tsx

    After:

    src/app/blog/

    ├── [pageId]/

    │ └── page.tsx (단일 ID 처리)

    └── page.tsx

    URL 형식 변경

    Before:

  • /blog/project/notion-blog-제작
  • /blog/coding-test/알고리즘/프로그래머스
  • After:

  • /blog/2bb2f60962d980f6be79cdef701778dc
  • /blog/15e8a2c4d8af8034a77ee123456789ab
  • 코드 개선

    Before: 재귀적 경로 탐색

    After: 직접 ID 조회

    결과

    Notion API 호출 횟수 감소

    데이터 출력 속도 증가 (Notion API 속도 자체가 느려서 더 개선하기 힘들어보임 링크)

    아무리 깊은 경로에 있는 Post여도 URL 길이 일정하게 적용