피드로 돌아가기
Building a Japanese-First Read-Later PWA: From Pocket Shutdown to Launch
Dev.toDev.to
Frontend

Vercel 제약 극복 및 IndexedDB 기반 분산 저장 구조의 Read-Later PWA 설계

Building a Japanese-First Read-Later PWA: From Pocket Shutdown to Launch

SHOTA2026년 5월 28일3intermediate

Context

기존 English-centric 서비스의 미흡한 일본어 추출 성능과 Pocket 서비스 종료에 따른 대체제 필요성 대두. Vercel Serverless 환경의 50MB 함수 크기 제한 및 ESM 호환성 문제로 인한 자체 Article Extraction 구현의 한계 직면.

Technical Solution

  • Mozilla Readability 기반 자체 구현 실패 후 Jina Reader API를 도입하여 Serverless Function 크기 제약 및 ESM 번들링 이슈 해결
  • 서버 저장 비용 절감과 사용자 프라이버시 보호를 위해 본문 데이터를 IndexedDB(Dexie)에 저장하고 메타데이터만 Supabase로 동기화하는 하이브리드 저장 구조 설계
  • 일본어 우선 UI 제공을 위해 /en 프리픽스 기반의 i18n 라우팅 및 Middleware를 통한 Accept-Language 기반 자동 리다이렉션 구현
  • sitemap.xml 및 robots.txt 등 정적 메타데이터 파일이 i18n 미들웨어에 의해 404 처리되는 현상을 방지하기 위해 Regex 기반의 Matcher 예외 처리 적용
  • Pocket CSV의 레거시(5컬럼) 및 신규(6컬럼) 포맷을 모두 수용하는 임포트 로직을 통한 데이터 마이그레이션 경로 확보

Next.js i18n 미들웨어 설계 시 .xml, .txt, .webmanifest 등 정적 파일이 라우팅 규칙에 포함되어 404를 유발하지 않는지 Matcher 설정을 반드시 검증할 것

원문 읽기