Trouble Shooting

[Next.js] ISR을 사용한 번역 데이터 로드

[Next.js] ISR을 사용한 번역 데이터 로드

문제

근래에 회사 프로덕트에서 '1:1 다국어 번역에 사용되는 소스를 개발팀의 디펜던시 없이 관리하고 싶다'라는 요구사항이 있었다. 프로덕트에 번역 기능을 추가한 지 얼마 되지 않아 번역 소스의 변경이 자주 일어날 수 있다고 판단된 사항이었다.

기술 스택 및 로직 결정

  • 기존에 사용하던 next-i18n은 프론트엔드 코드에 저장된 파일 기반(json)으로만 작동했다.
  • 그래서 구글 스프레드시트에 번역 소스를 저장하고 getStaticProps(ISR)로 불러와 react-i18n으로 번역하는 방식으로 로직을 변경했다.

Next.js 서버리스 함수를 사용한 이유

  1. 구글 스프레드시트에서 번역 소스를 불러오는데 사용되는 googleApis 라이브러리는 클라이언트 코드에서 작동하지 않았다.
  1. 번역 소스는 프론트엔드에서만 사용하는 데이터였다.
  1. 백엔드 디펜던시의 최소화가 필요했다.

기타 사항

  • 반복적으로 발생할 수 있는 번역 소스 페칭을 방지하기 위해, 구글 스프레드시트 상에서 번역 소스의 수정이 일어나면 시트에 수정 시간을 표시하는 자동화 함수(구글 스크립트)를 설정했다.
  • 프로덕트에서 언어 변환이 발생하면 수정 시간을 먼저 페칭하여 비교하고 번역 데이터가 최신이 아닐 때만 전체 소스를 페칭하는 로직을 적용해서 불필요한 데이터 로드 비용을 최소화했다.