SvelteKit에서 SSR 및 서버리스 기능을 사용하여 Vercel에서 응답 캐시

TLDR

Vercel 캐싱 및 서버리스 기능(이 경우 클라이언트가 아닌 서버 측 렌더링 중에 실행되는 기능)을 사용하여 API의 응답을 캐시하는 방법을 보여드리겠습니다. 이 경우 Binance API 호출에서 얻은 BTCUSD 가격입니다.

소개

안녕하세요. 두 번째 게시물에 오신 것을 환영합니다. 오늘은 서버에서 실행되는 함수(이 경우 Vercel)의 응답을 캐시하여 이 함수가 외부 API에 대해 수행하는 호출 수를 최적화하는 방법을 보여드리겠습니다. 즉, API 호출이 클라이언트가 아닌 서버에서 수행되어 웹 사이트에 액세스하는 사용자의 페이로드가 줄어듭니다.

신청

렌더링될 때마다 Binance API에서 비트코인 ​​가격을 가져오는 웹사이트가 있다고 가정해 보겠습니다. 즉, 사용자가 사이트에 액세스할 때마다 Binance API에서 데이터를 가져옵니다. 1분 동안 100번 방문하는 경우 50번째 방문부터 사용자는 429 HTTP ERROR(너무 많은 요청)를 받게 됩니다. 몇 초 동안 거의 변하지 않는 BTCUSD 가격을 얻기 위해 API를 여러 번 호출해야 합니까? - 아마 아닐 겁니다.

BTCUSD 가격을 Vercel에 캐싱하여 이 문제를 어떻게 해결할 수 있는지 살펴보겠습니다. 웹 사이트에 액세스하는 클라이언트가 3개 있다고 가정해 보겠습니다. 첫 번째 클라이언트는 서버리스 기능을 호출하고 해당 기능에 대한 응답을 3600초 동안 캐시합니다.

암호

이 경우 Binance API에서 실제로 가격 번호를 얻은 경우에만 응답을 캐시하려고 합니다. bodyShouldBeCacheable 또는 다른 유효한 방법을 사용할 수 있습니다.

// src/routes/api/btcusd.ts
import type { RequestHandler } from '@sveltejs/kit'

const BTCUSDT= 'https://api1.binance.com/api/v3/ticker/price?symbol=BTCUSDT'

export const get: RequestHandler = async () => {
    const getBtcUsdtPrice = async (): Promise<number | undefined> => {
         try{
             const data = await fetch(BTCUSDT)
             const { price } = await data.json()
             return price
         } catch(err) {
             return undefined
         }
    }

    const body = await getBtcUsdtPrice()
    const bodyShouldBeCacheable = !isNaN(body)

    return {
        status: 200,
        body,
        headers: {
            'Cache-Control': bodyShouldBeCacheable 
             ? 'max-age=3600, public' 
             : 'no-cache',
        },
    }
}

// src/routes/index.svelte

const btcPrice: Writable<number> = writable(0)

const fetchAndUpdateExchanges = async () => {
    const response = await fetch('/api/exchanges')
    const btcPriceData= await response.json()
    btcPrice.set(btcPriceData)
}

결론

SSR을 사용하는 것은 최종 사용자가 사이트를 렌더링하기 위해 다운로드하는 데이터의 양을 줄이는 데 항상 좋은 선택입니다. 특히 사용할 데이터가 제한되어 있거나 연결 속도가 느린 휴대 전화에서 실행하는 경우에 그렇습니다.
반면에 Vercel은 서버에서 데이터를 무료로(완전히) 영원히 렌더링할 수 없으므로 응답을 캐싱하는 것도 비용 절감에 도움이 됩니다!

다음에서 나를 팔로우할 수 있습니다.

Github