Upstash Redis로 구축하는 Netlify Graph 글로벌 캐시

Netlify가 Netlify Graph라는 새로운 기능을 발표했습니다. 그동안 개발자들이 지적해 온 빈틈을 메우는 좋은 한 걸음입니다.

기본적으로 Netlify Graph는 개발자가 웹 앱용 GraphQL API 호출을 손쉽게 구성하도록 도와주는 기능입니다. Netlify 대시보드에서 GraphQL 요청을 준비해 두면, 클릭 한 번으로 해당 클라이언트 코드를 프로젝트에 바로 삽입할 수 있습니다.

지연 시간 문제: 왜 캐싱이 필요한가?

다만 Netlify Functions를 서드파티 서비스와 함께 사용할 때는 단점이 있습니다. 클라이언트의 요청이 먼저 Netlify 백엔드(Functions)로 전달된 뒤, 서드파티 서비스(이 예제에서는 Spotify)로 다시 향하게 됩니다. 이 과정에서 서비스와 최종 사용자가 서로 다른 지역에 있다면 지연 시간이 상당히 늘어날 수밖에 없습니다.

하지만 Netlify 함수가 받아온 데이터를 캐싱할 수 있다면 지연 시간을 크게 줄일 수 있습니다. Upstash 글로벌 Redis 데이터베이스가 바로 이 문제에 적합한 솔루션입니다. Upstash Redis의 멀티 리전 복제 덕분에 API 응답을 전 세계적으로 캐시하고 복제할 수 있습니다.

이번 글에서는 Spotify API를 호출하고, 그 결과를 Upstash 글로벌 Redis에 캐싱하는 아주 간단한 Spotify 애플리케이션을 만들어 보겠습니다.

1단계: Next.js 스타터 앱 배포

먼저 Netlify 콘솔에서 Next JS Starter App을 배포합니다. 몇 번의 클릭만으로 배포할 수 있는 아주 간단한 Next.js 앱입니다. Next.js 스타터 앱 배포 방법은 여러 가지가 있으니 상황에 맞는 옵션을 선택하면 됩니다.

배포가 끝나면 샘플 저장소를 로컬로 클론한 뒤 netlify dev 명령을 실행합니다. 앱은 localhost:8888에서 정상적으로 구동되어야 합니다. 처음 설정하는 경우라면 netlify login을 먼저 실행해야 할 수도 있습니다.

2단계: Netlify Graph–Spotify API 통합 설정

이제 Netlify Graph와 Spotify API를 연동하겠습니다. 다음 경로로 이동합니다:

Netlify Console → Sample App → Graph → Connect API or Service → Spotify

Spotify 설정 페이지에서 Authentication과 Graph Explorer를 활성화하면, Spotify 계정 인증을 통해 API 연동이 진행됩니다.

3단계: GraphQL 플레이그라운드로 쿼리 작성하기

이제 GraphQL Playground를 사용할 차례입니다. Start querying Spotify 버튼을 클릭한 뒤, 프로젝트 디렉토리에서 다음 명령으로 netlify-cli를 실행합니다.

netlify dev --graph

CLI 실행이 완료되면 Netlify Graph 섹션에서 활성 세션을 확인할 수 있습니다. 세션을 클릭하면 GraphQL API용 플레이그라운드 환경이 열립니다.

이 플레이그라운드는 정말 강력합니다. 원하는 GraphQL 쿼리를 손쉽게 생성할 수 있습니다. 저는 Featured Playlists(추천 재생목록)를 반환하는 Spotify 쿼리를 빠르게 만들어 보았습니다.

query SpotifyFeatured {
  spotify {
    featuredPlaylists {
      name
      images {
        url
      }
      description }}}

쿼리 작성이 끝나면 코드를 생성해 프로젝트에 삽입합니다. Actions → Generate Handler를 클릭하세요.

그러면 netlify-cli가 api 디렉토리 아래에 SpotifyFeatured.js 파일을, pages 디렉토리 아래에 SpotifyFeaturedForm.jsx 파일을 자동으로 생성해 줍니다.

• SpotifyFeatured.js: Netlify 백엔드 → Spotify API에서 데이터를 가져오는 Netlify 함수 정의
• SpotifyFeaturedForm.jsx: Netlify 함수를 호출하고 응답을 반환하는 간단한 예제 폼 React 컴포넌트

저는 UI 경험을 조금 더 다듬기 위해 이 컴포넌트의 HTML/CSS 부분만 수정했습니다. 전체 코드는 글 마지막에 공유하겠습니다.

이제 SpotifyFeaturedForm.jsx 컴포넌트를 index.js에 포함합니다.

import Spotify from './SpotifyFeaturedForm'
...
...
<Spotify title="Spotify Featured Playlist"/>

이제 메인 페이지에 버튼이 생겨 Spotify API로부터 응답을 받을 수 있습니다. 다음은 이 응답들을 캐싱해 보겠습니다.

4단계: Upstash 글로벌 데이터베이스 생성

Upstash 콘솔에서 Upstash 글로벌 데이터베이스를 생성합니다. 몇 번의 클릭만으로 완료됩니다.

5단계: 자동 생성된 Netlify 함수에 캐시 로직 추가

이제 자동 생성된 Netlify 함수 코드(SpotifyFeatured.js)를 수정합니다. 코드 안에는 Netlify 백엔드/Spotify API에서 데이터를 가져오는 다음 부분이 있습니다.

const { errors, data } = await NetlifyGraph.fetchSpotifyFeatured({  }, {accessToken: accessToken});

여기에 먼저 Redis에서 캐시를 조회하고, 캐시가 없을 경우에만 서드파티 서비스를 호출하도록 변경하겠습니다.

Redis와의 통신에는 Upstash Redis JS 라이브러리를 사용했습니다. Upstash Redis REST 자격 증명은 데이터베이스 상세 페이지에서 확인할 수 있습니다.

아래 코드 스니펫에서 UPSTASH_REDIS_REST_URL과 UPSTASH_REDIS_REST_PASSWORD 값을 본인의 것으로 교체하세요.

redisClient.auth('UPSTASH_REDIS_REST_URL', 'UPSTASH_REDIS_REST_PASSWORD');
spotifyData = await redisClient.get('spotify-cache');
if (spotifyData.data == null) {
    spotifyData = await NetlifyGraph.fetchSpotifyFeatured({}, {accessToken: accessToken});
    if (spotifyData.errors) {
        console.error(JSON.stringify(spotifyData.errors, null, 2));
    } else {
        await redisClient.setex('spotify-cache', 300, JSON.stringify(spotifyData));
    }
} else {
    spotifyData = JSON.parse(spotifyData.data)
}
res.setHeader("Content-Type", "application/json");

return res.status(200).json({
    spotifyData
});

위 코드의 흐름은 다음과 같습니다. 먼저 Upstash Redis에 캐시가 존재하는지 확인하고, 존재하면 캐시된 데이터를 그대로 사용합니다. 캐시가 없다면 원본 API에서 데이터를 가져온 뒤 Upstash에 캐시로 저장합니다(여기서는 300초 TTL). 아주 단순한 코드 스니펫이므로, 목적에 맞게 자유롭게 개선하거나 변형할 수 있습니다.

이처럼 몇 줄의 코드만으로 Netlify Graph 기능에 글로벌 캐시 동작을 손쉽게 추가할 수 있습니다.

맺으며

Netlify Graph 기능 덕분에 모든 개발자가 서드파티 API 서비스를 자신의 코드에 손쉽게 통합할 수 있게 되었습니다. Netlify의 GraphQL 탐색기와 코드 자동 삽입 기능이 개발 생산성에 큰 도움이 됩니다.

반면, API 응답을 캐싱하고 싶다면 Upstash 글로벌 데이터베이스가 훌륭한 선택지입니다. 멀티 리전 복제를 통해 어디서든 빠른 응답 속도를 제공하며, 데이터베이스 생성 역시 몇 번의 클릭만으로 끝납니다.

예제 애플리케이션의 최신 코드는 여기에서 확인할 수 있습니다.