Vercel 무료 플랜 10초 제한, 스트리밍으로 우회하는 실제 구현 방법

Vercel Hobby 플랜으로 AI 채팅 만들다가 FUNCTION_INVOCATION_TIMEOUT 에러 본 적 있죠? 처음엔 코드 문제인 줄 알고 한참 디버깅하게 되는 그 에러요.

Vercel 무료 플랜의 서버리스 함수 실행시간 제한은 10초예요. 그런데 GPT-4o 기준으로 긴 응답 생성에 평균 10~40초가 걸려요. 사실상 AI 기능을 막아둔 장벽이나 다름없는 셈이죠.

그런데 이 제한을 우회하면서 무료 플랜을 쓰는 사이드 프로젝트들이 꽤 있어요. 방법은 스트리밍 응답 구현. 오늘은 코드 수준에서 뜯어볼게요.

핵심 요약

• Vercel Hobby 플랜의 서버리스 함수 실행시간 제한은 10초이며, Pro 플랜은 300초(5분)까지 허용된다.
• Vercel Edge Runtime을 쓰면 Hobby 플랜에서도 최대 30초까지 스트리밍 응답이 가능하다 (2026년 5월 기준 Vercel 공식 문서 기준).
• ReadableStream + TransformStream 기반 스트리밍 구현 시, 사용자 체감 응답 시작 시간을 기존 대비 80% 이상 단축할 수 있다.
• Node.js Runtime 대신 Edge Runtime으로 전환만 해도 타임아웃 에러의 대부분은 해결된다.

10초 제한이 문제가 된 이유

Vercel이 처음 등장했을 때는 정적 사이트와 간단한 API 엔드포인트 위주였어요. 10초 제한이 전혀 불편하지 않았던 시절이죠.

2023년 이후 상황이 바뀌었어요. OpenAI GPT-4, Anthropic Claude, Google Gemini 같은 LLM API가 대중화되면서 사이드 프로젝트에도 AI 기능을 넣는 게 일상이 됐거든요. 그런데 LLM 응답 생성 시간이 문제예요. GPT-4o 기준 긴 응답 생성에 평균 10~40초가 소요돼요. Vercel 무료 플랜의 10초 한도를 훌쩍 넘는 수치예요.

Pro 플랜은 월 $20. 사이드 프로젝트 하나에 매달 2만 원 이상 쓰기는 부담스럽죠.

플랜별 실행시간 제한 비교

여기서 핵심이 보여요. Edge Runtime은 Hobby 플랜에서도 30초를 줍니다. Node.js Runtime의 세 배예요.

스트리밍 응답의 원리: 타임아웃을 우회하는 방식

타임아웃 계산 방식의 허점

Vercel의 함수 실행시간 제한은 “첫 바이트 응답 시작 후"가 아니라 “함수 전체 실행 완료"를 기준으로 해요. 스트리밍을 쓰면 얘기가 달라지죠.

스트리밍 응답은 서버가 데이터를 조금씩 나눠서 보내는 방식이에요. HTTP chunked transfer encoding을 쓰는 거죠. LLM이 토큰 하나 생성할 때마다 클라이언트에 바로 전달하는 방식이에요. 전체 응답이 끝날 때까지 기다리지 않아요.

Edge Runtime에서 ReadableStream으로 응답을 보내면, Vercel은 이 연결을 “완료"로 보지 않고 “진행 중"으로 봐요. 그래서 30초 안에만 스트림이 시작되면, 이후 데이터가 흘러오는 동안은 타임아웃 카운터가 다르게 작동하는 셈이에요.

Edge Runtime으로 전환하는 법

Next.js 기준으로, 기존 API Route에 딱 한 줄만 추가하면 돼요.

export const runtime = 'edge';

이게 전부예요. 정말로요. 이 한 줄로 Node.js Runtime에서 Edge Runtime으로 전환되고, 함수 실행시간 한도가 10초에서 30초로 늘어나요.

다만 Edge Runtime에는 제약이 있어요. Node.js 내장 모듈(fs, path, crypto 등)을 직접 쓸 수 없고, npm 패키지도 Edge 환경을 지원하는 것만 써야 해요. 대부분의 AI SDK는 Edge를 지원하니까 걱정 안 해도 돼요.

실제 구현 코드

Vercel AI SDK(ai 패키지)를 쓰면 스트리밍 구현이 훨씬 간단해요.

// app/api/chat/route.ts
import { streamText } from 'ai';
import { openai } from '@ai-sdk/openai';

export const runtime = 'edge';

export async function POST(req: Request) {
  const { messages } = await req.json();

  const result = streamText({
    model: openai('gpt-4o'),
    messages,
  });

  return result.toDataStreamResponse();
}

toDataStreamResponse()가 내부적으로 ReadableStream을 만들고, 청크 단위로 응답을 흘려보내요. 클라이언트에서는 useChat 훅 하나면 연결돼요.

// app/page.tsx
'use client';
import { useChat } from 'ai/react';

export default function Chat() {
  const { messages, input, handleInputChange, handleSubmit } = useChat();
  
  return (
    <div>
      {messages.map(m => (
        <div key={m.id}>{m.content}</div>
      ))}
      <form onSubmit={handleSubmit}>
        <input value={input} onChange={handleInputChange} />
        <button type="submit">전송</button>
      </form>
    </div>
  );
}

AI SDK 없이 직접 구현하는 방법

서드파티 패키지 의존을 피하고 싶다면 직접 ReadableStream을 써도 돼요.

export const runtime = 'edge';

export async function POST(req: Request) {
  const { prompt } = await req.json();

  const response = await fetch('https://api.openai.com/v1/chat/completions', {
    method: 'POST',
    headers: {
      'Authorization': `Bearer ${process.env.OPENAI_API_KEY}`,
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      model: 'gpt-4o',
      messages: [{ role: 'user', content: prompt }],
      stream: true,  // 핵심: OpenAI에도 스트리밍 요청
    }),
  });

  // OpenAI의 스트림을 그대로 클라이언트에 전달
  return new Response(response.body, {
    headers: {
      'Content-Type': 'text/event-stream',
      'Cache-Control': 'no-cache',
    },
  });
}

OpenAI API에 stream: true를 넣으면 OpenAI 서버가 Server-Sent Events(SSE) 형식으로 응답을 보내줘요. 이 스트림을 Vercel 함수가 그대로 클라이언트에 중계하는 구조예요. 함수 자체가 오래 실행되는 게 아니라 데이터를 전달하는 파이프 역할을 하는 거죠.

스트리밍 방식 비교

실제로 쓸 때 주의할 점

문제 1: 환경변수가 Edge에서 안 보여요

Edge Runtime은 process.env를 Node.js와 약간 다르게 처리해요. NEXT_PUBLIC_ 접두어가 없는 서버 환경변수는 빌드 타임에 번들링되지 않으면 접근이 안 되는 경우가 있어요. API 키가 undefined로 뜨면 이걸 의심하세요.

해결책은 간단해요. next.config.js에서 명시적으로 환경변수를 Edge에 전달하거나, Vercel 대시보드에서 환경변수 설정 시 “Edge Functions"에도 체크가 돼있는지 확인하면 돼요.

문제 2: 30초도 부족할 수 있어요

매우 긴 응답을 생성하거나 여러 LLM 호출을 체인으로 연결하면 30초도 빠듯할 수 있어요. 이 경우엔 두 가지 선택지가 있어요.

• Vercel Pro 업그레이드: 300초 한도, 월 $20
• 백그라운드 작업 분리: Inngest, Upstash QStash 같은 서비스로 장시간 작업을 Vercel 함수 외부에서 실행하고, 결과를 WebSocket이나 폴링으로 가져오는 구조

무료를 유지하면서 30초 이상이 필요하다면, 작업을 쪼개는 설계가 필요해요. AI 응답 하나를 여러 번 호출로 나누거나, 긴 작업을 외부 큐로 위임하는 방식이에요. 항상 답은 아니지만, 생각보다 많은 케이스에서 통해요.

결론: 10초 제한은 우회 가능해요

정리하면 이렇게 돼요.

• export const runtime = 'edge' 한 줄 추가 → 10초 → 30초
• 스트리밍 응답 구현 → 타임아웃 에러 대부분 해결
• Vercel AI SDK 쓰면 코드 10줄 이하로 완성 가능
• 30초도 부족하면 Inngest/QStash로 분리하거나 Pro 플랜 고려

2026년 기준으로 Vercel 무료 플랜은 여전히 사이드 프로젝트의 좋은 선택지예요. AI 기능이 필요하다고 무조건 Pro로 올릴 필요 없어요. Edge Runtime + 스트리밍 조합만으로 충분히 해결되는 케이스가 많거든요.

참고로 앞으로 6~12개월 사이에 Vercel이 Hobby 플랜의 Edge 실행시간을 더 늘릴 가능성도 있어요. 경쟁 서비스인 Cloudflare Workers가 무료 플랜에서 더 넉넉한 한도를 제공하고 있어서, Vercel 입장에서도 무시하기 어려운 압박이거든요.

지금 만들고 있는 AI 기능이 30초 안에 처리될 수 있는지 한번 계산해 보세요. 생각보다 많은 케이스가 스트리밍만으로 해결돼요.

참고자료

1. Vercel 무료버전 서버속도 - 인프런 | 커뮤니티 질문&답변
2. Vercel을 이용한 무료 웹 배포 이용해보기 - 코딩은재밌어
3. Vercel 무료 배포 실전 가이드 2026 — Hobby 플랜으로 사이드 프로젝트 운영하기 | DevFinance

Photo by Jarrod Erbe on Unsplash